O que é Localizador de cores complementares?

O Localizador de Cores Complementares calcula a cor oposta no círculo cromático para qualquer valor inserido. Também mostra harmonias análogas, triádicas e complementares divididas para você montar uma paleta coesa.

A ferramenta usa o motor HSL do chroma-js e gira a roda de matiz em ângulos fixos para gerar seis harmonias: complementar (180°), análoga (±30°), tríade (120° e 240°), complementar dividida (150° e 210°), tetrádica/quadrada (90°, 180°, 270°) e monocromática (variações mais claras e mais escuras da cor base). Cada amostra exibe os valores HEX, RGB e HSL e copia qualquer um dos três formatos com um clique, pronto pra colar no Figma, no config do Tailwind ou direto numa regra CSS.

Como usar

1. Passo 1 — Insira uma cor base em formato HEX (#FF6600) ou RGB (255 102 0), ou selecione uma com o seletor de cores.
2. Passo 2 — Visualize a cor complementar (oposta a 180° no círculo cromático) e os seus códigos de cor instantaneamente.
3. Passo 3 — Explore harmonias adicionais (análogas, triádicas, complementares divididas) e copie o valor de qualquer amostra.

Quando usar

• Esboçar uma paleta de marca a partir de uma cor primária sem abrir o Adobe Color.
• Escolher uma cor de botão de destaque que salte sobre o fundo da página.
• Selecionar cores de séries em gráficos que continuem legíveis lado a lado.

Resultado

Um designer de marcas insere o laranja primário #FF8C00 e obtém o azul complementar #0073FF, além dos tons quentes análogos #FF4400 e #FFB800 para uma paleta coesa.

Perguntas frequentes

Qual a diferença entre complementar e complementar dividida?

Complementar é a cor diretamente oposta na roda (180°). Dividida pega as duas cores que ladeiam esse oposto (150° e 210°). A versão dividida soa menos agressiva e costuma se encaixar melhor em uma interface inteira sem brigar.

As harmonias funcionam com base muito escura ou muito pálida?

As harmonias baseadas em matiz (complementar, análoga, tríade, complementar dividida, tetrádica) só giram o matiz, então saturação e luminosidade ficam preservadas: base pálida produz parceiras pálidas e base escura produz parceiras escuras. A monocromática varia a luminosidade ao redor do seu matiz de propósito. Se uma parceira baseada em matiz sair lavada, aumente a saturação da base antes de gerar.

Segue a roda do artista (RYB) ou a roda da tela (RGB)?

A da tela. O oposto do vermelho (#FF0000) aqui é ciano (#00FFFF), não verde como diz a teoria das tintas a óleo. Para trabalho digital é o modelo certo; para mistura física de tinta vai parecer fora.

Por que algumas bases dão um complementar quase igual à base?

Cinzas puros têm matiz indefinido, então a rotação gira em torno de nada e devolve o mesmo cinza. Adicione ao menos 5% de saturação à base e a complementar pula direitinho.

Dá pra exportar a paleta inteira de uma vez?

Dá, de quatro jeitos. «Baixar paleta» salva cada amostra e seu HEX num arquivo de texto puro. «Baixar CSS» exporta a paleta como variáveis CSS prontas pra usar (por exemplo --color-complementary-1: #0099FF;). «Config do Tailwind» gera um objeto de cores pronto pra colar no tailwind.config.js. «Imagem PNG» salva a paleta inteira como uma imagem com rótulos, ótima para revisões de design.

Ferramentas relacionadas