Como usar

1. Clique em qualquer lugar da roda cromática para escolher uma cor, ou ajuste os controles deslizantes de matiz, saturação e luminosidade.
2. Veja a cor selecionada nos formatos HEX, RGB e HSL abaixo da roda.
3. Clique em uma amostra de harmonia para ver os esquemas complementar, análogo, triádico e complementar dividido.

Perguntas frequentes

O que é uma harmonia de cores ?

A harmonia de cores designa um arranjo agradável de cores baseado em sua posição na roda cromática. As harmonias comuns incluem complementar (oposta), análoga (adjacente) e triádica (equidistante).

Qual é a diferença entre HEX, RGB e HSL ?

O HEX é um código hexadecimal de 6 dígitos (#RRGGBB). O RGB usa os valores vermelho, verde e azul (0-255). O HSL usa matiz (0-360°), saturação (0-100 %) e luminosidade (0-100 %).

Posso usar essas cores nos meus designs ?

Sim ! Copie qualquer valor e cole-o diretamente no seu CSS, em um software de design ou um aplicativo web. Todos os valores estão em conformidade com os padrões e amplamente suportados.

Uma breve história da roda de cores

Isaac Newton desenhou a primeira. Em Opticks (1704), ele relatou os experimentos com prisma que havia mostrado pela primeira vez à Royal Society em 1672, demonstrando que a luz branca é uma mistura de cores espectrais, e organizou o espectro em um círculo fechado para que a extremidade vermelha pudesse encontrar a violeta. Ele nomeou sete cores (vermelho, laranja, amarelo, verde, azul, índigo, violeta) escolhidas por analogia às sete notas da escala musical diatônica, já que acreditava que a cor e a harmonia compartilhavam uma estrutura matemática. O índigo como uma faixa separada do azul é a baixa mais famosa dessa escolha estética.

A Theory of Colours (1810) de Goethe reformulou a roda em torno da percepção, em vez da física. Ele organizou as cores simetricamente em metades quentes «positivas» e frias «negativas» e observou que cores opostas «evocam-se reciprocamente no olho», uma articulação precoce da teoria do processo oponente que antecipou a lei do contraste simultâneo que Michel Eugène Chevreul publicaria em 1839 a partir da manufatura de tapeçarias dos Gobelins.

A A Color Notation (1905) de Albert Munsell foi a primeira roda fundamentada na percepção humana medida, em vez de na convenção, separando matiz, valor (luminosidade) e chroma (saturação) em dimensões independentes, a ancestral direta de todo espaço de cor perceptual moderno, incluindo o CIELAB e o OKLCH. A roda que a maioria dos designers aprendeu na escola é mais jovem: Johannes Itten codificou a roda RYB de 12 cores na Bauhaus entre 1919 e 1922, identificando três primárias (vermelho, amarelo, azul), três secundárias, seis terciárias e sete tipos de contraste de cor. As rodas realmente usadas na tela são diferentes de novo: o HSL e o HSV são reparametrizações cilíndricas do RGB inventadas na PARC e em outros laboratórios de computação gráfica na década de 1970, para que um designer pudesse pensar em três controles deslizantes intuitivos («este matiz, mais vívido, mais claro») em vez de três canais RGB opacos. O passo mais recente é o OKLCH (Björn Ottosson, dezembro de 2020), agora no CSS Color Module Level 4, uma roda em que passos angulares iguais parecem passos perceptuais de matiz iguais.

Três famílias de roda

«Roda de cores» esconde o fato de que existem três tipos diferentes, cada um correto para uma situação física diferente:

• RYB (vermelho, amarelo, azul), a roda artística de ensino que Itten popularizou. É uma convenção baseada na experiência com pigmentos, não um modelo da física. Nenhuma combinação de tintas vermelha, amarela e azul consegue misturar toda cor visível.
• RGB (vermelho, verde, azul), aditivo. Usado onde quer que a cor seja emitida: monitores, telefones, projetores, iluminação de palco. Ancorado na fisiologia: as retinas humanas têm três tipos de cone sensíveis a comprimentos de onda longos, médios e curtos. Os navegadores e o CSS trabalham em RGB, então a roda HSL desta ferramenta é uma reparametrização polar do sRGB.
• CMY / CMYK (ciano, magenta, amarelo + key/preto), subtrativo. Usado onde quer que a cor seja refletida: impressão, tinta, corante. A mistura diminui o brilho; as gráficas comerciais acrescentam o preto para pretos verdadeiros e para economizar tinta.

A consequência prática: os valores HEX, RGB e HSL exportados por esta roda são precisos para a tela. Eles não são precisos para tinta, e uma tiragem de impressão em CMYK vai precisar da sua própria conversão, um passo que as gráficas geralmente fazem para você.

Como o HSL se mapeia em um círculo

HSL significa matiz, saturação, luminosidade. O matiz é um ângulo em torno de um eixo central, com o vermelho a 0°, o verde a 120°, o azul a 240°, voltando ao vermelho a 360°. A saturação vai de 0% (cinza) a 100% (totalmente vívido). A luminosidade vai de 0% (preto), passando pelo matiz natural a 50%, até o branco a 100%. Geometricamente, o modelo é um bicone (dois cones unidos pelas pontas), com as cores mais saturadas no equador. O HSV é semelhante, mas usa o Valor em vez da Luminosidade, com cores totalmente saturadas em V=100 e o modelo inteiro com a forma de um único cone.

A função hsl() do CSS recebe os mesmos três números. A sintaxe moderna é separada por espaços, com um alfa opcional depois de uma barra:

hsl(210 80% 50%)
hsl(210 80% 50% / 0.5)
hsl(0.5turn 80% 50%)        /* turns also accepted */

O legado separado por vírgulas hsl(210, 80%, 50%) e o alias hsla() ainda são suportados por compatibilidade retroativa. O CSS Color Module Level 4 está amplamente disponível nos navegadores desde por volta de 2015 para o HSL básico, com a sintaxe moderna chegando depois.

Ressalva honesta: o HSL não é perceptualmente uniforme. Um amarelo em L=50% parece muito mais brilhante que um azul em L=50%, ainda que ambos tenham o mesmo número de luminosidade, e uma roda fatiada por matiz com S e L constantes terá amarelos visualmente pesados e azuis fracos. Para a visualização de dados e paletas de marca cuidadosamente calibradas, o novo espaço de cor oklch() é uma escolha melhor: passos angulares iguais parecem passos perceptuais de matiz iguais. Para escolher uma cor e pegar um HEX, o HSL serve bem.

As harmonias clássicas, com a matemática

Todo esquema de harmonia é definido por um conjunto de deslocamentos angulares a partir de um matiz base. Seja B o matiz que você selecionou:

Esquema	Matizes	Sensação
Monocromático	B (varie apenas S e L)	Sutil, baixo contraste, tranquilo
Análogo	B − 30°, B, B + 30°	Rico, harmonioso, pores do sol, folhagem
Complementar	B, B + 180°	Dinâmico, chama a atenção
Complementar dividido	B, B + 150°, B + 210°	Contraste forte, mas mais suave que o complementar puro
Triádico	B, B + 120°, B + 240°	Contraste nítido com equilíbrio e riqueza
Tetrádico (retangular)	B, B + 60°, B + 180°, B + 240°	Dois pares complementares, deixe um dominar
Quadrado	B, B + 90°, B + 180°, B + 270°	Divisão uniforme em quatro, o equilíbrio é mais difícil

Esses ângulos são convenções de ensino herdadas de Goethe e Itten, não leis psicofísicas. Eles produzem contraste e equilíbrio de forma confiável, e é por isso que os designers recorrem a eles, mas são heurísticas, não regras. Trate as amostras de harmonia acima como pontos de partida para iterar.

Quando você recorreria a uma roda

• Design web e de interface. Escolha uma cor primária de marca, derive um complemento para o destaque de perigo / chamada para ação, derive um terço triádico para os gráficos. Depois, verifique o contraste contra o seu fundo e o texto.
• Identidade de marca. Uma cor de logotipo mais uma paleta documentada de harmonias para o material de marketing.
• Visualização de dados. Paletas categóricas (mais de 10 matizes distintos a uma distância perceptual igual) e escalas sequenciais ou divergentes, mais bem feitas em OKLCH do que em HSL quando você passa de três ou quatro séries.
• Design de interiores. Uma cor de parede base, um acabamento análogo, um destaque complementar em almofadas ou na arte.
• Correção de cor em fotografia. O azul-petróleo e laranja (um par complementar) é o clichê do cinema moderno, porque tons de pele quentes contra sombras frias passam uma sensação cinematográfica.
• Arte de jogos e ilustração. Destacar personagens por matiz contra os ambientes, com destaques complementares para os pontos focais.

O daltonismo e a roda

Cerca de 8% dos homens e 0,5% das mulheres de ascendência do norte da Europa têm alguma forma de deficiência da visão das cores (a taxa varia conforme a população). Os genes dos cones L e M ficam no cromossomo X, e é por isso que a condição é muito mais comum em homens. Várias harmonias (em particular os pares complementares vermelho/verde) colapsam para quase monocromáticas nas formas mais comuns:

• Deuteranopia / deuteranomalia: cones de comprimento de onda médio não funcionais ou fracos. A forma mais comum (cerca de 6% dos homens). Vermelho e verde são confundidos.
• Protanopia / protanomalia: cones de comprimento de onda longo não funcionais ou fracos (cerca de 2% dos homens). Os vermelhos parecem esmaecidos, às vezes confundidos com o preto.
• Tritanopia / tritanomalia: cones de comprimento de onda curto não funcionais ou fracos. Muito rara. Azuis e amarelos são confundidos.

O princípio «não dependa apenas da cor» da WCAG 2.1 é diretamente relevante: nunca use a cor como o único portador de informação. Acrescente contraste de brilho por cima do contraste de matiz, use padrões ou formas junto da cor nos gráficos, e passe qualquer harmonia que você gerar por um simulador de daltonismo antes de fixar. Verifique também o contraste WCAG: mínimo de 4,5:1 para texto normal no AA, 7:1 no AAA.

Mais perguntas

Por que o vermelho, o amarelo e o azul são chamados de cores «primárias»?

Na tradição artística / RYB (a roda que Itten ensinou na Bauhaus), eles são os três pigmentos a partir dos quais se presumia que todos os outros poderiam ser misturados. Essa suposição é convenção, não física: nenhuma combinação de pigmentos reais vermelho, amarelo e azul consegue misturar toda cor visível. Na luz aditiva, as verdadeiras primárias são vermelho, verde e azul (RGB); na impressão subtrativa, são ciano, magenta e amarelo (CMY). O RYB persiste na educação artística porque é pedagogicamente simples e dá resultados razoáveis ao misturar tintas do mundo real.

O 16:9 é o mesmo que a proporção áurea para a cor?

Não, esses são dois conceitos sem relação. A «proporção áurea» surge na proporção (retângulos, layout) e equivale a aproximadamente 1,618. As harmonias da teoria das cores vêm da geometria angular no círculo de matizes: 180° para a complementar, 120° para a triádica, 90° para a quadrada. Não há nenhuma harmonia de proporção áurea embutida no ensino padrão da roda de cores.

As cores que eu vejo aqui vão corresponder ao que é impresso?

Quase com certeza não exatamente. Esta roda é HSL sobre o sRGB, cor aditiva, projetada para telas. A impressão é CMYK subtrativa. Azuis vívidos e verdes brilhantes que parecem bons em um monitor muitas vezes dessaturam drasticamente no papel, e as conversões fora do gamut podem deslocar os matizes. Os designers de impressão normalmente mantêm uma prova calibrada à frente deles ou trabalham diretamente em CMYK na ferramenta de design. Use esta roda para o mock-up de tela e depois converta.

A «psicologia das cores» (vermelho = paixão, azul = calma) é baseada em evidências reais?

Ela tem força popular, mas um suporte empírico fraco e culturalmente variável. Culturas diferentes associam as mesmas cores a ideias muito diferentes (o branco é uma cor de casamento na Europa Ocidental e uma cor de luto em partes do Leste Asiático). Use a psicologia das cores como um ponto de partida de design e um vocabulário para conversar com clientes, não como uma lei.

Algo é enviado a um servidor?

Não. A roda é renderizada em um canvas HTML5; os ângulos de harmonia são calculados localmente em JavaScript; as strings HEX, RGB e HSL são escritas na sua área de transferência pela API do navegador. A página funciona offline depois de carregada.

Ferramentas relacionadas