Gerador de Esquemas de Cores

Teoria das cores

Para montar cada esquema, a ferramenta trabalha no espaço HSL e gira a matiz (hue) da cor base por ângulos fixos. Na Complementar, pega o tom oposto, a 180°. A Análoga usa os vizinhos imediatos, em ±30°. Já a Triádica distribui três pontos equidistantes, a 120° um do outro, enquanto a Tetrádica usa quatro pontos espaçados em 90°. Por fim, a Split-Complementar divide o oposto em dois tons, posicionados em ±150°.

Teoria das cores em dois minutos

A roda de cores que ainda usamos nasceu em 1666, quando Isaac Newton dobrou o espectro visível em um círculo de sete matizes para explicar como a luz branca se decompõe nas cores do arco-íris. Goethe a refinou psicologicamente um século depois, e na escola Bauhaus Johannes Itten codificou a roda moderna de 12 matizes que os designers ainda ensinam hoje. A roda de Itten é construída sobre o modelo RYB (vermelho-amarelo-azul) — útil para pintores porque pigmentos subtraem luz. Telas usam RGB (aditivo, emissão de luz); impressão usa CMYK (tinta subtrativa).

As harmonias clássicas

• Monocromática — um único matiz com variações de luminosidade e saturação. Silenciosa, elegante, difícil de errar.
• Análoga — três cores adjacentes na roda (≈30°). Calma, natural, harmoniosa — a paleta do pôr do sol e da floresta.
• Complementar — duas cores opostas (180°). Contraste máximo, mas visualmente tensa; use uma como fundo e a outra com parcimônia, como destaque.
• Complementar dividida — uma cor mais as duas vizinhas da sua oposta. Contraste forte com menos tensão que a complementar pura.
• Tríade — três matizes a 120°. Vibrante e equilibrada; funciona quando uma das três domina.
• Tetrádica / retangular — quatro matizes em dois pares complementares. Rica, mas difícil — mantenha uma dominante e o resto como acento.
• Quadrada — quatro matizes a 90°. O esquema mais colorido; corre risco de ficar caótico sem neutros fortes.

Modelos de cor para designers e devs

• HSL (Hue / Saturation / Lightness) — intuitivo para humanos; nativo em CSS via hsl(). Ótimo para gerar tons mais claros e escuros ajustando o L.
• HSB / HSV (Hue / Saturation / Brightness) — variante preferida do Photoshop e de muitos color pickers.
• Lab (CIE L*a*b*) — perceptualmente uniforme: uma distância numérica fixa corresponde a uma diferença percebida constante. Base da métrica ΔE usada para medir precisão de cor em gráfica e identidade de marca.
• OKLCH — alternativa moderna introduzida no CSS Color Module 4. Uniforme como Lab, mas expressa como Lightness, Chroma e Hue, tornando-se a forma recomendada para gerar paletas consistentes (Tailwind v4 já vem com defaults em OKLCH).

Acessibilidade: razão de contraste

As diretrizes WCAG 2.1 definem razões mínimas de contraste entre texto e fundo: AA exige 4,5:1 para texto comum (3:1 para texto grande), e AAA exige 7:1. Uma paleta bonita que falha em contraste é uma paleta quebrada — verifique sempre o texto contra o fundo depois de escolher as cores. Evite colocar uma cor saturada sobre outra saturada da mesma família (ex: azul médio sobre azul claro) — a diferença de luminosidade é estreita demais.

Construindo uma paleta de marca na prática

Um sistema sólido tem aproximadamente: um matiz primário, um secundário (análogo ou complementar), um destaque (usado em menos de 10% da UI para chamadas à ação) e uma escala neutra de cinzas. Sistemas modernos como o Material Design 3 e a paleta do Tailwind usam uma rampa numérica (50, 100, 200, …, 950) gerada mantendo o matiz fixo e movendo luminosidade/chroma — é isso que produz blue-500, blue-600 etc.

Perguntas frequentes

Qual harmonia combina com uma interface limpa? Paletas análogas com um único acento complementar para botões costumam ser as mais legíveis e menos cansativas.

Qual modelo de cor é melhor para CSS? Hoje, hsl() para suporte amplo, oklch() quando você quer rampas perceptualmente consistentes e mira navegadores evergreen.

Como construir uma paleta de marca? Comece pelo matiz primário pelo qual você quer ser lembrado, derive tons em OKLCH, depois adicione uma secundária análoga e um acento complementar. Teste cada combinação texto/fundo contra o WCAG AA.