Explorador de Cores

Arraste um pino ao redor da roda de cores e veja os marcadores de harmonia girarem com ele, complementares a 180°, triádicos a intervalos de 120°, vizinhos análogos, complementares divididos, tetrádicos. Troque entre HSL (a roda de engenharia) e RYB (a roda do artista), compare como elas discordam e copie a combinação que você escolher como uma paleta.

Como funciona o explorador de cores

  1. 1

    Arraste o pino ao redor da roda

    O pino define sua cor base. Saturação e luminosidade deslizam com controles separados.

  2. 2

    Selecione uma harmonia

    Complementar, análoga, triádica, complementar dividido, tetrádica, monocromática. Os marcadores de harmonia giram com a base.

  3. 3

    Trocar modelo (HSL vs RYB)

    A roda HSL é simétrica (vermelho oposto ao ciano, verde oposto ao magenta). A roda RYB é assimétrica (vermelho oposto ao verde, azul oposto ao laranja, corresponde à intuição de mistura de tintas).

  4. 4

    Copie a paleta

    Hex, RGB, HSL para a base e cada marcador de harmonia. Variáveis CSS, mapa Sass ou CSV simples.

Roda HSL vs Roda RYB

Ambas as rodas organizam cores em um círculo, mas discordam sobre quais cores são “opostas”:

Base Complemento HSL Complemento RYB
Vermelho Ciano Verde
Laranja Verde-água Azul
Amarelo Azul Roxo
Verde Magenta Vermelho
Azul Amarelo Laranja
Roxo Verde-amarelo Amarelo
  • HSL (matiz, saturação, luminosidade): uma representação cilíndrica do sRGB usada em CSS e design digital. Somar 180° seleciona o matiz oposto nessa roda digital.
  • RYB (vermelho, amarelo, azul): uma roda conceitual tradicional do ensino de arte. Este explorador remapeia os ângulos de matiz para aproximar essa convenção; ele não prevê o resultado da mistura de pigmentos reais.

Ambos são válidos para diferentes objetivos. Use HSL para trabalho em tela; use RYB quando você se importa com a intuição de mídia pintada.

Definições de harmonia na roda

  • Complementar: base + 180°. Maior separação de matiz na roda escolhida.
  • Análoga: base com vizinhas a -30° e +30°. Suave e unificada.
  • Triádica: base + 120° + 240°. Vibrância equilibrada.
  • Complementar dividido: base + 150° + 210°. Rico sem a tensão total do complementar.
  • Tetrádica / quadrada: base + 90° + 180° + 270°. Quatro matizes com espaçamento igual.
  • Monocromática: mesmo matiz, diferente luminosidade/saturação.

Temperatura na roda

  • Metade quente: vermelhos, laranjas, amarelos. Tradicionalmente avançando (atrai o olhar para frente).
  • Metade fria: verdes, azuis, roxos. Tradicionalmente recuando.
  • Neutros: cores dessaturadas; pertencem a qualquer metade dependendo do tom.

Usos práticos

  • Exploração de paleta de marca: arraste o pino até encontrar uma cor que se encaixe, depois verifique os marcadores triádicos ou tetrádicos para acentos de suporte.
  • Estudos de arte: escolha uma referência fotográfica, encontre o matiz dominante e observe os vizinhos análogos para sombreamento monocromático.
  • Ilustração: escolha um par complementar para sombras, por exemplo, para um objeto laranja, pinte sombras em azul em vez de apenas um laranja mais escuro.
  • Maquete de design de interiores: rodas triádicas mapeiam paletas de interiores clássicas (azul/amarelo/vermelho na americana tradicional; verde/laranja/roxo no boêmio).

Por que a roda não é perfeitamente intuitiva

A percepção humana real de cores é mais complexa do que qualquer uma das rodas sugere. O sistema Munsell, LAB e OKLCH tentam arranjos perceptualmente uniformes, e eles não formam um círculo simples, o croma varia com a luminosidade em cada matiz. Para trabalho de design de produção, espaços de cor perceptuais dão resultados mais limpos do que rodas; para exploração conceitual de cores, a roda ainda vence em clareza.

Perguntas frequentes

HSL para design digital (CSS, telas, UI). RYB quando você está pensando em tinta, impressão ou arte tradicional e quer a intuição de harmonia convencional da escola de arte.

Os modelos organizam os matizes de formas diferentes. O HSL usa o ângulo de matiz do sRGB, portanto o ciano fica oposto ao vermelho. Na convenção RYB tradicional, o verde fica oposto ao vermelho. Aqui o RYB é uma aproximação visual, não uma previsão de como tintas específicas serão misturadas.

Para educação, esboço de ideias e comunicação com clientes, sim. Para trabalho de paleta preciso, os profissionais usam cada vez mais espaços perceptuais (LAB, OKLCH), onde a luminosidade e o croma são independentes do matiz.

Copie a paleta como CSS, Sass ou CSV e salve-a no seu ambiente de trabalho. O explorador não oferece biblioteca de paletas nem armazenamento em conta. No fluxo de quatro etapas, as configurações visíveis da roda ficam no URL e podem permanecer no histórico do navegador.

Ferramentas relacionadas