Gerador de paleta de cores
Informe uma cor base, escolha um esquema de harmonia e veja as amostras na hora. Copie um código HEX avulso ou a paleta inteira como propriedades personalizadas do CSS.
Funciona no seu navegador: nada do que você digita é enviado para lugar nenhum.
Como usar
- Escreva um código HEX ou escolha uma cor no seletor.
- Escolha um esquema de harmonia na lista.
- Clique em Copiar ao lado de uma amostra para um único código, ou copie o bloco de variáveis CSS com a paleta inteira.
Como funciona
A ferramenta converte a cor base de RGB para HSL (matiz, saturação, luminosidade) e gira o matiz. Por exemplo, #3366cc é hsl(220, 60%, 50%). A complementar fica a 180°: hsl(40, 60%, 50%), que é #cc9933. As cores giradas são arredondadas para o valor RGB inteiro mais próximo.
Exemplo
Por padrão a ferramenta começa em #3366cc com a tríade: saem #3366cc, #cc3366 e #66cc33, e o bloco CSS é --color-1: #3366cc;, --color-2: #cc3366;, --color-3: #66cc33;. Um vermelho puro #ff0000 em complementar dividido dá o vermelho mais #00ff80 e #0080ff, os dois matizes de cada lado do ciano.
Dicas
- Use uma cor do esquema como principal e as outras como destaque; distribuir todas por igual fica carregado.
- Paletas análogas passam calma; as complementares, energia.
- Renomeie as variáveis de acordo com a função (
--brand, --accent) depois de colar.
Perguntas frequentes
Como as cores são calculadas?
A cor base é convertida para HSL. Os esquemas de harmonia giram o matiz em ângulos fixos no círculo cromático e mantêm a saturação e a luminosidade, então todas as cores são tão vivas quanto a base. A primeira amostra de cada esquema é a sua própria cor base.
Qual é a diferença entre tríade e tétrade?
A tríade usa três matizes separados por 120°, um conjunto equilibrado mas vivo. A tétrade usa aqui quatro matizes em 0°, 60°, 180° e 240°, um retângulo no círculo: tem dois pares complementares e é mais difícil de manter equilibrada.
Como funciona o esquema monocromático?
Ele mantém o matiz e a saturação da cor base e fixa a luminosidade HSL em 20, 35, 50, 65 e 80%. A cor base só aparece se a luminosidade dela coincidir com um desses valores.
As paletas garantem contraste suficiente?
Não. Harmonia descreve relações de matiz, não legibilidade. Confira cada par de texto e fundo em um verificador de contraste antes de usar.