Buscador de Cor Complementar
Encontre a cor complementar (oposta) de qualquer cor, seu inverso RGB e a cor de texto legível para usar sobre ela.
1.316 visualizações
Como Funciona
Duas cores são complementares quando estão em exatamente pontos opostos no círculo cromático, a 180° de distância em matiz. Matematicamente, esta ferramenta converte sua cor para o modelo HSL, pega seu valor de Matiz e soma 180° módulo 360 — por exemplo, um matiz de 40° (laranja) se torna 220° (azul). Saturação e Luminosidade permanecem inalteradas, então a complementar é uma verdadeira rotação ao redor do círculo, não uma cor diferente escolhida ao acaso. Colocadas lado a lado, cores complementares se intensificam visualmente uma à outra, motivo pelo qual a complementar é a escolha natural para destaques, botões e chamadas para ação que precisam se sobressair em um design dominado pela cor base.
Esse efeito tem base na própria visão humana. Olhar fixamente para uma cor saturada por vários segundos e depois olhar para uma superfície branca lisa produz uma imagem residual temporária aproximadamente na cor complementar — um efeito fisiológico real causado pela fadiga temporária das células cone sensíveis à cor na retina. Isso é parte do motivo pelo qual pares complementares parecem especialmente vívidos e "vivos" juntos: o olho é preparado pelo mesmo mecanismo que produz imagens residuais. Além da complementar, esta ferramenta também calcula o inverso RGB (255 menos cada canal — o clássico "negativo fotográfico") e escolhe uma cor de texto legível (preto ou branco) para sua entrada com base em sua luminância percebida.
O Que Você Deve Saber
- Complementar e inverso não são a mesma operação — elas só coincidem para cores totalmente saturadas; para qualquer coisa suave, pastel ou em tons de cinza, os dois cálculos produzem resultados visivelmente diferentes.
- Use a complementar com moderação. Duas cores complementares em intensidade máxima e em partes iguais tendem a vibrar visualmente e cansar a vista; um equilíbrio de 90/10 parece intencional em vez de agressivo.
- A sugestão de cor de texto é um ponto de partida, não uma garantia WCAG — verifique a razão de contraste real para o texto do corpo com um verificador dedicado antes de publicar.
- Um exemplo prático: para
#2563EB(um azul médio, matiz ≈ 221°), a complementar fica perto do matiz 41° (um âmbar/laranja quente) e o inverso RGB é#DA9C14— visualmente próximos aqui porque a cor de origem é bastante saturada, mas os dois métodos divergiriam fortemente a partir de um azul-acinzentado suave.
Perguntas Frequentes
Complementar x inverso — qual é a diferença?
A complementar gira apenas o Matiz no círculo cromático (+180°), mantendo saturação e luminosidade idênticas; o inverso RGB inverte cada canal de forma independente (255−R, 255−G, 255−B), como um negativo fotográfico. Para uma cor primária saturada, os dois podem parecer semelhantes, mas para um cinza médio ou um pastel eles divergem drasticamente — o inverso de um cinza médio ainda é cinza médio, enquanto sua "complementar" é tecnicamente indefinida, já que uma cor totalmente dessaturada não tem matiz para girar.
Por que olhar fixamente para uma cor e depois desviar o olhar revela sua complementar?
Este é o efeito de "imagem residual": as células cone da sua retina que detectam uma determinada cor se fatigam temporariamente após exposição prolongada. Quando você então olha para uma superfície branca neutra, as células fatigadas respondem menos enquanto as outras respondem normalmente, e seu cérebro interpreta esse desequilíbrio como a percepção da cor complementar — um fenômeno fisiológico genuíno enraizado na química da retina, não uma ilusão de ótica ou um truque da mente.
Quando devo usar a cor complementar?
Como um destaque pequeno e deliberado — botões, links, realces, selos — sobre um design dominado pela cor base. Usar as duas em intensidade máxima em quantidades aproximadamente iguais tende a vibrar visualmente e cansar a vista em vez de parecer refinado; designers costumam dessaturar ou escurecer uma das duas cores do par para suavizar o efeito.
Como a cor de texto legível é decidida?
A partir da luminância percebida da cor usando a fórmula YIQ, que pondera vermelho, verde e azul de acordo com a sensibilidade do olho humano a cada um (o verde contribui muito mais para o brilho percebido do que o azul): fundos claros recebem texto escuro e fundos escuros recebem texto claro, mantendo o par legível à primeira vista.
Por que exatamente 180°, e não outro ângulo?
O círculo cromático representa o matiz como um ciclo de 360°, e 180° é matematicamente o único ponto de distância angular máxima a partir de qualquer matiz dado — o mais distante que uma cor pode estar de outra permanecendo no mesmo círculo. Essa separação máxima é exatamente o que cria o contraste visual mais forte; qualquer ângulo menor (como os 120° usados na harmonia triádica) troca parte desse contraste por mais equilíbrio entre três cores em vez de duas.
Ferramentas Semelhantes
Reportar um Problema
Buscador de Cor Complementar
Comentários
Ainda não há comentários — seja o primeiro a escrever um!