Gerador de paleta de cores
- Os arquivos não saem do seu dispositivo
- Roda no navegador
- Grátis, sem cadastro, sem marca d’água
3b82f6
e24956
3ba01b
Como usar Gerador de paleta de cores
Crie paletas de cores de três jeitos: regras de harmonia a partir de uma cor base, paletas aleatórias que você pode travar e gerar de novo, ou uma escala de 11 tons de 50 a 950 como a do Tailwind. As cores são calculadas em OKLCH, e toda paleta exporta para CSS, Tailwind v3 ou v4, JSON, .gpl ou .ase.
- 1
Escolha um Modo: Harmonia, Aleatório ou Tons.
- 2
Para Harmonia ou Tons, defina a Cor base e escolha uma Regra, ou um Nome de cor e o passo em Manter a base em.
- 3
Para Aleatório, clique em Gerar ou pressione Espaço e trave as cores que você quer manter antes de gerar de novo.
- 4
Passe o mouse sobre uma cor e clique no ícone de copiar; em Harmonia você também pode torná-la a nova cor base.
- 5
Em Exportar, escolha HEX, CSS, Tailwind v3, Tailwind v4 ou JSON e copie o código, ou baixe .gpl ou .ase.
Perguntas frequentes
Por que as harmonias são calculadas em OKLCH?
Os matizes são girados em OKLCH, então cada cor mantém a luminosidade e a vivacidade percebidas da cor base. Girar em HSL faria os amarelos parecerem muito mais claros que os azuis.
Como os tons de 50 a 950 são montados?
A luminosidade segue uma curva próxima das paletas do próprio Tailwind, e o croma atinge o pico por volta de 500–600. Sua cor base é mantida exatamente no passo dela; Automático escolhe o passo mais próximo da luminosidade.
Posso voltar a uma paleta aleatória anterior?
Sim. Use Paleta anterior e Próxima paleta; as últimas 50 paletas ficam guardadas enquanto a página está aberta, mas nada é salvo depois que você a fecha.
Quantas cores uma paleta pode ter?
Paletas aleatórias têm de 2 a 10 cores (use os botões − e +). As regras de harmonia dão um número fixo, por exemplo 2 para complementar e 5 para análoga ou monocromática, e Tons sempre dá 11.
Como é a exportação do Tailwind v4?
Um bloco @theme de variáveis --color-*, pronto para colar no seu CSS. Os tons são escritos como valores oklch() com nomes como --color-brand-500; os outros modos usam HEX.