Gerador de paleta de cores

Como usar o gerador de paleta de cores

1. Toque em Nova paleta (ou aperte a barra de espaço no teclado) para receber cinco cores que seguem uma harmonia de cores. Cada toque sorteia uma paleta nova.
2. Trave as cores de que gostou com o cadeado embaixo de cada amostra. As cores travadas ficam no lugar enquanto as outras mudam; no modo aleatório, a primeira cor travada vira a âncora das novas cores, que continuam combinando com ela.
3. Parta da sua cor: mude Começar de para Minha cor base e escolha a cor — a da sua marca, por exemplo. Toda paleta passa a conter exatamente essa cor.
4. Escolha uma harmonia (análoga, monocromática, complementar, complementar dividida, tríade, tétrade ou tons claros e escuros) ou deixe em Qualquer para variar a cada vez.
5. Ajuste uma cor com o lápis, que abre o seletor de cores do aparelho; a cor editada fica travada automaticamente.
6. Tire as cores de uma foto: toque em Cores de uma imagem, solte o arquivo na ferramenta ou cole uma captura de tela. As cinco cores principais da imagem são encontradas e travadas.
7. Copie e exporte: toque num código para copiá-lo, alterne entre HEX, RGB, HSL e OKLCH, copie a paleta inteira como variáveis CSS ou JSON, ou baixe um PNG com as cinco amostras. Copiar link gera um endereço que abre exatamente esta paleta.

Tudo roda no seu navegador. A imagem que você carrega é lida no seu aparelho, reduzida para no máximo 100 pixels no lado maior e analisada ali mesmo; ela nunca é enviada.

Por que as paletas são geradas em OKLCH

Os círculos de cores mais comuns — HSL no CSS, HSV/HSB nos programas de design — são só rearranjos dos canais vermelho, verde e azul, não modelos da visão humana. Com a mesma luminosidade HSL de 50%, o amarelo puro parece muito mais claro que o azul puro, e uma paleta que gira o matiz em HSL salta entre cores berrantes e apagadas. Este gerador trabalha em OKLCH, a forma polar do OKLab, um espaço de cor perceptual publicado por Björn Ottosson em 2020 e adotado no CSS Color Module Level 4 como a função oklch(). Os três números são L (luminosidade percebida, 0–100%), C (croma, a intensidade da cor: 0 é cinza; as cores sRGB chegam a cerca de 0,32) e H (ângulo do matiz em graus). Passos iguais em L parecem passos iguais de claridade, seja qual for o matiz.

A conversão tem três etapas: desfazer a curva gama do sRGB para obter luz linear, multiplicar por uma matriz fixa e tirar a raiz cúbica, e multiplicar por uma segunda matriz para chegar a L, a e b. O croma é √(a² + b²) e o matiz é atan2(b, a). Valores de referência desta ferramenta, iguais aos publicados:

Nem toda cor OKLCH existe numa tela. Quando uma cor planejada cai fora do gamut sRGB, o gerador mantém a luminosidade e o matiz e reduz o croma até ela caber — a mesma ideia do mapeamento de gamut do CSS Color 4 —, então a paleta nunca muda de matiz só porque uma cor foi cortada.

Como a paleta é montada

Toda paleta parte de uma âncora: a sua cor base, a primeira cor travada ou uma cor aleatória com luminosidade entre 45% e 80% e croma moderado. As outras quatro cores recebem os matizes da harmonia escolhida e níveis de luminosidade espalhados entre 30% e 90% (o nível mais próximo da âncora é pulado, então todas diferem dela em claridade). O croma varia até 30% em torno do da âncora e diminui nas cores muito claras e muito escuras, que ficam berrantes quando saturadas demais. Um número aleatório sorteado a cada Nova paleta comanda todas as escolhas, e o mesmo número sempre dá a mesma paleta — é assim que um link copiado reproduz as suas cores.

Como os ângulos são medidos no círculo OKLCH, a complementar de uma cor pode ser diferente da que aparece num círculo HSL ou no círculo cromático de pintura (vermelho-amarelo-azul): a complementar OKLCH do azul-marinho #1f4e79 (matiz 249°) é um tom quente de oliva alaranjado, perto de 69°.

Exemplo: uma tríade a partir de #1f4e79

Com a cor base #1f4e79 (luminosidade OKLCH 41,4%, croma 0,088, matiz 249,1°) e a harmonia tríade, a semente inicial da página produz as cores abaixo. Os matizes ficam perto de 249°, 9° e 129°, a 120° um do outro, e a luminosidade vai de 28,7% a 92,9%:

As colunas de contraste mostram que texto funciona em cada cor. O bordô escuro aceita texto branco com 14,66:1, o rosa bem claro aceita texto preto com 16,79:1, e o verde do meio chega a só 3,64:1 com branco — serve para títulos grandes, é pouco para texto corrido.

Contraste e acessibilidade

Cada amostra mostra o melhor entre texto branco e preto, com a razão e o nível, e a tabela de contraste embaixo da paleta lista os dois. Os números seguem as Diretrizes de Acessibilidade para Conteúdo Web (WCAG) 2.2 do W3C: a luminância relativa é 0,2126 R + 0,7152 G + 0,0722 B dos canais linearizados, e a razão é (mais clara + 0,05) / (mais escura + 0,05), de 1:1 a 21:1. Texto normal precisa de 4,5:1 para o nível AA e 7:1 para AAA; texto grande (24 px, ou 18,7 px em negrito) precisa de 3:1 para AA. As razões são cortadas, não arredondadas, na segunda casa decimal, então uma cor nunca aparece aprovada sem estar.

Dicas para usar a paleta

• Dê um papel a cada cor. Uma divisão comum é 60% para o fundo ou a cor dominante, 30% para a secundária e 10% para o destaque; a cor mais escura costuma servir para o texto.
• Confira o texto antes de decidir. Use a tabela de contraste ou cole qualquer par no seletor de cores para ver os códigos e o contraste.
• Não dependa só do matiz. Cerca de 1 em cada 12 homens tem deficiência de visão de cores vermelho-verde; varie também a luminosidade.
• Use a exportação CSS como ponto de partida para os tokens de design: troque --color-1 e as demais por papéis como --marca ou --fundo.

Perguntas frequentes

Última atualização: 15 de outubro de 2026