:root {
--color-1: #3b82f6;
--color-2: #f6af3b;
}O que faz
O Gerador de Paleta de Cores transforma qualquer cor base em uma paleta harmoniosa usando regras clássicas da teoria das cores: complementar, complementar dividida, análoga, triádica, tétrada e monocromática. Escolha uma cor, escolha uma harmonia e obtenha um conjunto de amostras pronto para usar com cópia em um clique. Exporte a paleta inteira como custom properties de CSS, um snippet de config do Tailwind ou JSON puro. Tudo roda 100% client-side: nada sai do seu navegador.
Como usar
- Escolha uma cor base com o seletor de cores, ou digite um valor hex (ex.
#3B82F6) no campo de texto. Use Randomize para sortear uma base nova. - Escolha um esquema de harmonia - Complementar, Complementar dividida, Análoga, Triádica, Tétrada ou Monocromática. Para Monocromática, defina o número de Steps (2-9).
- Clique em qualquer amostra para copiar o hex dela - o valor é mostrado direto na cor, em preto ou branco, o que ler melhor.
- No painel Export, escolha CSS / Tailwind / JSON e use Copy export para pegar a paleta inteira de uma vez.
- Use Copy link para capturar uma URL compartilhável - a cor base, o esquema e a contagem de passos ficam codificados no link, então quem abrir vê exatamente a sua paleta.
Exemplos
Paleta complementar a partir do vermelho
Base #FF0000 → [ #FF0000, #00FFFF ] - vermelho e ciano, diretamente opostos no círculo cromático.
Exportação para Tailwind
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
palette: {
'1': '#3b82f6',
'2': '#f59e0b',
},
},
},
},
};Exportação de variáveis CSS
:root {
--color-1: #3b82f6;
--color-2: #f59e0b;
}Bom saber
- Monocromática mantém o matiz e a saturação da base, espalhando a luminosidade ao longo do número escolhido de passos - ótimo para montar escalas de tom de UI.
- Privado: toda a geração acontece localmente no seu navegador - seguro para cores de marca proprietárias.
- Compartilhável: toda paleta tem sua própria URL - cor base, harmonia e contagem de passos vivem no
hashhashA one-way function that maps data of any size to a fixed-length digest. Same input, same digest; any change, different digest; not reversible.
do link, então favoritar ou compartilhar recarrega a paleta exata. - Formatos: hex é a fonte da verdade; HSL é mostrado como referência e usado internamente na matemática de harmonia.
- Ferramentas relacionadas: procure as ferramentas de gradiente e contraste em Color & Design.