Gerador de paletas de cores
Gere paletas de cores a partir de uma cor base com harmonias complementar, análoga, triádica, tetrádica, quadrada ou monocromática. Trave cores e exporte CSS/Tailwind.
Configurações da paleta
Matiz base + o matiz oposto (180°).
Bloqueie as cores de que gostar; Gerar novamente escolhe uma nova cor base aleatória e mantém as bloqueadas.
Exportar
Paleta
:root {
--palette-1: #3b82f6;
--palette-2: #b07d00;
}Ferramentas Relacionadas
Ver TodasO que é Gerador de paletas de cores?
Monta uma paleta a partir de uma única cor base usando as harmonias clássicas do círculo cromático. A rotação de matiz pode ser feita em OKLCH perceptual (mantém igual a luminosidade percebida) ou em HSL clássico. As cores podem ser travadas antes de gerar de novo, e a paleta é exportada como variáveis CSS, SCSS, configuração do Tailwind v3, @theme do Tailwind v4 ou JSON.
Como usar Gerador de paletas de cores
- Informe uma cor base (hex, rgb(), hsl() ou oklch()) ou clique em gerar novamente para uma aleatória.
- Escolha uma harmonia de cores e se o matiz é girado em OKLCH ou HSL.
- Trave as cores que quer manter; ao gerar novamente, só as destravadas são substituídas.
- Clique em uma amostra para copiar o valor hex.
- Escolha um formato de exportação e um nome de token e copie o código.
Exemplo
Base #ff0000, Triadic, HSL
:root {
--palette-1: #ff0000;
--palette-2: #00ff00;
--palette-3: #0000ff;
} Quando usar Gerador de paletas de cores
Use-o para explorar esquemas de cores para uma marca, um tema de interface ou uma ilustração. Uma harmonia é um ponto de partida, não uma verificação de acessibilidade: confira o contraste entre texto e fundo separadamente. Para expandir uma única cor em uma escala 50–950, use o Gerador de tons de cor.
Como funciona Gerador de paletas de cores
As harmonias giram o matiz base em ângulos fixos, mantendo saturação/croma e luminosidade: complementar 0°/180°, análoga 0°/±30°/±60°, triádica 0°/120°/240°, complementar dividida 0°/150°/210°, tetrádica 0°/60°/180°/240°, quadrada 0°/90°/180°/270°. A monocromática mantém o matiz e altera a luminosidade em −30, −15, 0, +15, +30 (HSL %) ou ±0,15/±0,3 (L do OKLCH). Cores OKLCH fora do sRGB passam por mapeamento de gama com redução de croma. Gerar novamente escolhe uma base aleatória com matiz 0–360°, saturação 55–85% e luminosidade 45–60%.
Casos de Uso Comuns
- Explorar cores de marca a partir da cor de um logo
- Cores de destaque para um tema de interface
- Cores de categorias em visualização de dados
- Exportar uma paleta como propriedades personalizadas CSS
- Configurar um tema do Tailwind
Perguntas Frequentes
Devo girar o matiz em OKLCH ou em HSL?
O OKLCH mantém igual a luminosidade percebida de todas as cores, o que gera paletas mais equilibradas. O HSL corresponde ao círculo cromático clássico usado em muitas ferramentas de design, mas suas cores podem variar muito em brilho.
O que travar faz?
Uma amostra travada mantém a cor quando você muda a cor base ou a harmonia, ou quando gera novamente.
As paletas são acessíveis?
Harmonias não dizem nada sobre contraste. Confira as combinações de texto e fundo com as razões de contraste da WCAG antes de usá-las.