Gerador de Paleta de Cores Harmoniosas

Escolha a cor base e o tipo de harmonia. A paleta e a escala de tons aparecem na hora, prontas para copiar ou exportar.

Processado no seu navegador — nada é enviado ou armazenado.

Cor base

Harmonia

Três cores a 120° uma da outra. Viva e equilibrada.

#1a73e8
Base
#e81a73
+120°
#73e81a
+240°

Escala de tons da cor base

#c5f4ff
100
#9cd4ff
200
#73b3ff
300
#4a93fc
400
#1872e7
500
#0256ba
600
#003b8e
700
#002165
800
#00093f
900

Exportar

Prefixo das variáveis

Incluir a escala de tons

Variáveis CSS

:root {
  --cor-1: #1a73e8;
  --cor-2: #e81a73;
  --cor-3: #73e81a;
}

Como usar

Escolha a cor base no seletor, digite um HEX ou clique em Cor aleatória.
Escolha a harmonia: análoga, complementar, complementar dividida, triádica, tetrádica, quadrada ou monocromática.
Clique numa amostra para copiar o HEX dela, ou use outra cor da paleta como nova base.
Escolha o formato de exportação e copie o código ou baixe o arquivo.

As harmonias

Análoga: vizinhas no círculo cromático (±30°). Calma e natural, comum em ilustrações e marcas sóbrias.
Complementar: a cor oposta (180°). Máximo contraste — boa para destacar um botão sobre um fundo.
Complementar dividida: as vizinhas da oposta (150° e 210°). Contraste forte, mas menos agressivo.
Triádica: três cores a 120°. Viva e equilibrada.
Tetrádica e quadrada: quatro cores. Ricas; funcionam melhor com uma dominante e as outras como detalhe.
Monocromática: a mesma matiz em cinco claridades.

Escala de tons

Abaixo da paleta há uma escala de nove tons da cor base, do mais claro ao mais escuro. Ela é calculada em OKLCH, onde passos iguais parecem iguais aos olhos — o mesmo método das escalas do Tailwind e de vários sistemas de design.

Conteúdo e funcionamento revisados pela Equipe UtiliLab em 18 de setembro de 2026. Consulte nossa metodologia de revisão.

Perguntas frequentes

Em que círculo cromático as harmonias são calculadas?

No círculo do HSL, o mesmo dos editores gráficos: complementar do vermelho é ciano, do azul é laranja.

Que formatos posso exportar?

Lista de HEX, RGB ou HSL, variáveis CSS (:root), variáveis SCSS, JSON e o bloco @theme do Tailwind CSS v4.

Ferramentas relacionadas

Seletor de Cores

Escolha uma cor no quadro de saturação e brilho e copie em HEX, RGB, HSL ou HSV.

Extrair Cores de Imagem

Descubra as cores dominantes de uma foto ou logotipo, com HEX e proporção de cada uma.

Gerador de Gradiente CSS

Monte gradientes lineares, radiais e cônicos num editor visual e copie o CSS.

HEX para RGB

Converta códigos HEX em RGB e RGBA, com validação e cópia em um clique.