Roda de cores e conversor

Como ler a roda

A roda mapeia dois dos três canais do HSV num disco. O ângulo é o matiz — vermelho no topo, depois amarelo, verde, ciano, azul e magenta no sentido horário. A distância até o centro é a saturação: branco no meio, totalmente saturado na borda. O brilho é a terceira dimensão e não cabe num disco plano, então ele vive no anel em volta da roda — e arrastar o punho do anel redesenha o disco inteiro, de modo que o que você vê é sempre a fatia real do espaço de cor em que está trabalhando.

Cada cor da paleta aparece no disco como um marcador branco. Arraste o maior e a harmonia inteira gira junto, preservando os ângulos entre as cores; arraste um dos menores e só aquela cor se move, o que muda a paleta para Personalizada.

Vale enfatizar porque a maioria das rodas de cor online desenha um disco fixo de 50% de luminosidade e deixa o controle mudar só a amostra selecionada. Aqui a roda e o anel andam juntos, então uma paleta escura é escolhida a partir de uma roda escura.

As harmonias, e quando cada uma funciona

• Complementar — dois matizes a 180°. Contraste máximo, o que a torna excelente para um único acento contra a cor dominante e péssima para duas áreas grandes, onde ela vibra.
• Análoga — três matizes vizinhos, a 30° um do outro. A paleta mais tolerante; não tem como desafinar porque os matizes dividem a mesma região da roda. Escolha padrão para degradês, ilustração e interfaces calmas.
• Tríade — três matizes a 120°. Vibrante e equilibrada na teoria, difícil de controlar na prática. Dê 60% da área a um matiz, 30% ao segundo e 10% ao terceiro.
• Complementar dividida — a base mais os dois vizinhos da complementar. Mantém quase todo o contraste do par complementar sem a dureza, e é por isso que costuma ser a recomendação para quem está começando.
• Tétrade — dois pares complementares. A mais rica e a mais fácil de errar; exige uma cor claramente dominante ou vira ruído.
• Monocromática — um matiz em vários níveis de luminosidade. Nunca desafina, e é assim que praticamente toda interface constrói hierarquia. O que falta é um ponto focal, então em geral ela precisa de um acento vindo de outro ponto da roda.

Contraste não é opcional

Cada bloco da paleta se rotula em preto ou em branco, o que a fórmula de luminância relativa do WCAG disser que lê melhor — uma checagem rápida de se a cor é clara ou escura o bastante para carregar texto. Os limites que importam: 4,5:1 para texto corrido no nível AA, 3:1 para texto grande e 7:1 para AAA. Uma razão abaixo de 3:1 não deveria carregar texto nenhum, independentemente do que diga o manual da marca.

A falha comum é uma cor de marca em meio-tom — um azul ou verde médio, perto de 50% de luminosidade — que fica em torno de 3:1 tanto no branco quanto no preto. Essa cor funciona como preenchimento ou borda, mas nunca como texto. Se a cor fica igualmente esquisita no branco e no preto, é isso que está acontecendo, e a correção é mexer no brilho pelo anel, não no matiz pelo disco.

Formatos, em resumo

HEX e RGB descrevem a mesma coisa — canais aditivos de luz — e são o que o navegador usa no fim das contas. HSL é o formato para editar, porque ajustar luminosidade ou saturação é mexer num número em vez de três. HSV — o espaço em que a própria roda trabalha — corresponde aos seletores do Figma e do Photoshop. CMYK é para impressão, e o valor aqui é aproximação, não conversão com gerenciamento de cor.

Privacidade

A roda é desenhada num canvas do seu navegador e toda conversão é aritmética local. Nada é enviado e nada é armazenado.