Explorador de Cores
Escolha a cor base
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
Arraste o pino ao redor da roda
O pino define sua cor base. Saturação e luminosidade deslizam com controles separados.
-
2
Selecione uma harmonia
Complementar, análoga, triádica, complementar dividido, tetrádica, monocromática. Os marcadores de harmonia giram com a base.
-
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
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
Conversor de Binário para ASCII
Cole binário (bytes separados por espaço ou um longo fluxo de bits) e obtenha o texto ASCII que ele representa. Lida com codificações de 7 bits e 8 bits.
Gerador de Paletas de Cores
Gere paletas monocromáticas, análogas, complementares, triádicas ou tetrádicas a partir de uma cor base HEX e exporte variáveis CSS prontas para copiar.
Conversor de ASCII para Hex
Converta texto ASCII em valores de byte hexadecimal. A saída usa dois dígitos hexadecimais por caractere, prontos para dumps de memória, rastreamentos de pacotes ou tabelas de firmware.
Simplificador de Álgebra Booleana
Simplifique expressões booleanas usando mapas de Karnaugh e o algoritmo de Quine-McCluskey. Mostra cada passo de minimização e uma forma final SOP/POS.
Conversor de BBCode para HTML
Converta BBCode (marcação de fórum) para HTML limpo. Lida com tags de formatação, listas, citações, código, imagens, links e tabelas.
Binário para Decimal
Converta números binários para decimal instantaneamente. Mostra a expansão posicional para que você possa ver como cada bit contribui.