Como montar uma paleta que funciona
Uma paleta boa tem três coisas antes de qualquer regra de matiz: uma cor clara e uma escura (em preto e branco ela ainda se lê), cores no mesmo volume de saturação (uma não grita enquanto as outras sussurram) e nada na faixa do amarelo escurecido, que vira oliva sujo. A ferramenta aplica isso antes de sortear qualquer coisa, e é por isso que apertar espaço não dá paleta ruim.
O jeito rápido: escolha um estilo (pastel, terroso, vívido, luxo, corporativo), aperte espaço até uma cor agradar, trave essa cor e continue apertando. Em meia dúzia de toques a paleta está pronta. Se você já tem a cor da marca, clique numa faixa, digite o hex, trave e escolha uma harmonia: as outras cores nascem a partir dela.
Por que as cores são medidas em OKLCH
No HSL, que a maioria dos geradores usa, amarelo e azul com a mesma luminosidade têm brilho completamente diferente, e girar o matiz em 30 graus perto do vermelho não é a mesma distância que perto do verde. O OKLCH corrige as duas coisas: um passo de luminosidade é o mesmo passo visual em qualquer cor, e a saturação é comparável entre matizes. É o espaço que o CSS moderno já entende, e é o que faz as paletas daqui não desbotarem no meio.
O controle de saturação mostra a porcentagem do teto daquele matiz: 100% é o mais vivo que aquela cor consegue ser na tela. Em número absoluto o controle enganaria, porque um azul claro aguenta muito menos saturação que um azul médio.
Os quatro jeitos de gerar
Cada modo responde a uma pergunta diferente. Nenhum deles sorteia hex e torce: todos passam pelo mesmo diagnóstico antes de aparecer.
- Surpreenda-me: aleatório que sempre fica bom. Matizes espalhados, uma cor escura dessaturada, uma clara e meios-tons no mesmo volume.
- Por estilo: caráter antes do matiz. Pastel, vívido, terroso, neon, vintage, nórdico, luxo, corporativo, tropical, noturno, candy e outono são faixas de luminosidade e saturação com neutros obrigatórios.
- Por harmonia: as regras clássicas (complementar, análoga, tríade, dividida, tétrade, quadrada, monocromática, tons e sombras) medidas em OKLCH, em quatro execuções: matemática, perceptual, com ritmo e em rampa de luz.
- Por curva: infinito de verdade. Uma onda de cosseno com doze números, âncoras interpoladas com easing ou um ciclo de matiz com rampas de luz e saturação; cada semente é uma curva nova.
Harmonias clássicas, medidas certo
Complementar (o matiz oposto), análoga (vizinhos na roda), tríade (três pontos iguais), dividida, tétrade e quadrada estão todas aqui, com os ângulos medidos em OKLCH. Cada regra tem quatro execuções: matemática (ângulos exatos), perceptual (cores igualmente distinguíveis), com ritmo (clara, escura, clara) e em rampa de luz, que é a que melhor vira interface. A regra diz onde os matizes ficam; a luminosidade e a saturação, que vêm antes, são o que faz a paleta funcionar.
Contraste e daltonismo
Cada faixa mostra, no próprio texto sobre ela, a melhor cor de texto (preto ou branco) e a razão de contraste WCAG, que é o que se cobra em contrato de acessibilidade. O diagnóstico ainda simula os três tipos mais comuns de daltonismo e avisa quando duas cores que você distingue viram a mesma para quem não separa vermelho de verde. Cerca de 8% dos homens estão nesse grupo.
Levar a paleta para o projeto
O botão Exportar entrega a paleta pronta para colar: variáveis CSS com hex e oklch(), bloco @theme do Tailwind v4, objeto do Tailwind v3, variáveis e mapa SCSS, JSON com nome, RGB e OKLCH de cada cor, e a imagem das faixas em SVG ou PNG. Os nomes das variáveis saem do nome da cor em português (terracota, azul-petroleo), então o código já nasce legível.
Paletas prontas com identidade
Abaixo do gerador há sessenta paletas curadas em seis coleções: Brasil (cerrado, litoral, manguezal), cidades (Copacabana, Ouro Preto, Paulista à noite), cultura (bossa nova, carnaval, azulejo português), materiais (terracota, concreto, latão), comida (açaí, café coado, goiabada com queijo) e épocas (art déco, neon 80, flat 2010). Cada uma passou no diagnóstico sem aviso e diz onde funciona. Clique em uma para abrir no gerador e ajustar.