Gerador de paleta de cores
Comece com uma cor e receba paletas combinando, cada amostra com os valores HEX e RGB e o contraste com branco e preto.
Funciona inteiramente no seu navegador
Paleta aleatória
Cinco cores do gerador de números aleatórios do seu navegador. Trave as que quiser manter e sorteie de novo. Aperte a barra de espaço para sortear quando nenhum campo de texto estiver em foco.
Exportar
As paletas são montadas no espaço de cor OKLCH e mostradas como HEX sRGB, então cores vivas demais para uma tela têm o croma reduzido. Os números de contraste usam a fórmula do WCAG 2, que mede apenas o contraste de luminosidade.
Como criar uma paleta de cores
- Escolha uma cor base no seletor ou digite um valor como
#1636a3ouf60no campo HEX. - Veja as paletas de harmonia logo abaixo. Cada amostra mostra o HEX, o RGB e se um texto preto ou branco sobre ela passa no WCAG AA ou AAA.
- Escolha uma paleta em Exportar e copie ou baixe como propriedades personalizadas CSS, um array JSON ou uma lista simples. Use Paleta aleatória e os botões de travar para explorar.
Como as harmonias são montadas
Um gerador de paleta de cores parte da ideia de harmonia: um conjunto de cores cujos matizes ficam em ângulos fixos na roda de cores. Cores análogas são vizinhas, a 30 graus de distância. Uma cor complementar fica a 180 graus, um par complementar dividido fica a 150 e 210 graus, uma tríade tem matizes espaçados em 120 graus, e uma tétrade usa quatro matizes a 90 graus um do outro. A paleta monocromática mantém o matiz e varia a luminosidade, dos tons claros aos escuros.
A roda usada aqui é o OKLCH, a forma cilíndrica do espaço OKLab de Björn Ottosson. A conversão vai de sRGB para luz linear, passa pelas matrizes do OKLab e volta, com uma verificação de gama. Se uma cor girada cai fora do que o sRGB consegue mostrar, o croma dela é reduzido em pequenos passos até caber, mantendo a luminosidade e o matiz que você escolheu.
O contraste é informado para cada amostra tanto com branco quanto com preto, porque a primeira pergunta sobre uma cor de paleta geralmente é qual texto pode ficar sobre ela. A taxa e a indicação AA ou AAA são sempre escritas por extenso, para que a informação não dependa de enxergar a cor.
Dicas
- Precisa da mesma cor em HSL, CMYK ou como nome CSS? Use o Conversor de cores e contraste.
- Transforme duas cores da paleta em um fundo com o Gerador de gradiente CSS.
- Quer uma cor tirada de uma foto em vez de uma roda? Experimente o Seletor de cores de imagem.
Perguntas frequentes
Por que OKLCH em vez de HSL?
No HSL, um amarelo e um azul com o mesmo valor de luminosidade parecem muito diferentes em brilho. O OKLCH foi feito para que passos iguais de luminosidade pareçam iguais, o que mantém as amostras de uma paleta com peso uniforme. O matiz é o ângulo usado nas harmonias, então uma cor complementar fica a 180 graus da sua base no OKLCH, não no HSL.
O que acontece quando uma cor não pode ser mostrada na tela?
Girar um matiz mantendo a luminosidade e o croma às vezes cai fora da faixa sRGB que uma tela comum consegue mostrar. A ferramenta então reduz o croma, mantendo luminosidade e matiz, até a cor caber. É por isso que uma amostra girada pode parecer um pouco menos viva que a base.
O que significam os rótulos AA e AAA?
Eles informam a taxa de contraste WCAG 2 de um texto branco ou preto sobre aquela amostra. Uma taxa de 4,5 ou mais é AA para texto normal, 7 ou mais é AAA, e de 3 a 4,5 passa no AA só para texto grande. Uma amostra que reprova tanto com preto quanto com branco é um fundo ruim para texto.
Como funciona a paleta aleatória?
Cinco cores são sorteadas com o gerador seguro de números aleatórios do navegador: matizes espalhados pela roda, com luminosidade e croma aleatórios em uma faixa que evita quase preto e quase branco. Trave uma amostra para mantê-la e depois clique em Paleta aleatória ou aperte a barra de espaço para trocar as outras.
Qual formato de exportação devo usar?
As propriedades personalizadas CSS podem ser coladas direto no bloco :root de uma folha de estilos. O array JSON serve para design tokens ou scripts, e a lista simples tem um HEX por linha, para ferramentas que aceitam cores coladas. Os três usam os valores HEX exibidos.
Aceita HEX abreviado e letras maiúsculas?
Sim. #abc, abc, #AABBCC e aabbcc são todos aceitos. Valores com um par de alfa, como os de oito dígitos, não são aceitos aqui; use o Conversor de cores e contraste para remover o alfa antes.