Gerador de paleta de cores a partir do HEX

Este gerador cria uma paleta a partir de uma cor: uma escala de 11 tons, de 50 (quase branco) a 950 (quase preto), como a do Tailwind, e as combinações clássicas do círculo cromático, como complementar, análogas e tríade. A escala pode ser copiada como variáveis CSS ou como tema do Tailwind 4.

Atualizado em · Por Leonardo Gaertner

Escala de tons (50 a 950)

  • 50#f2f7ff
  • 100#ddeaff
  • 200#c1d9ff
  • 300#97bfff
  • 400#66a0ff
  • 500#3b82f6
  • 600#2068d9
  • 700#004fbd
  • 800#003d97
  • 900#002d73
  • 950#001d51

Combinações

Complementar

  • #3b82f6
  • #f6af3b

Análogas

  • #3bdff6
  • #3b82f6
  • #523bf6

Tríade

  • #3b82f6
  • #f63b82
  • #82f63b

Complementar dividida

  • #3b82f6
  • #f6523b
  • #dff63b

Tétrade

  • #3b82f6
  • #f63bdf
  • #f6af3b
  • #3bf652

Clique em uma cor para copiar o código. A escala varia a luz no espaço OKLCH, que acompanha melhor a percepção do olho, e mantém o tom da cor base.

Achou um resultado errado ou tem uma sugestão? Avise por e-mail.

Como usar

  1. Digite a cor base em HEX (ou outro formato) ou escolha no seletor.
  2. Confira a escala de tons e as combinações. Clique em uma cor para copiar o código.
  3. Copie a escala inteira como variáveis CSS ou para o @theme do Tailwind 4.

Como funciona

A escala varia a luz no espaço OKLCH e mantém o tom da cor base, por isso os 11 passos parecem da mesma família. Perto do branco e do preto, a saturação diminui, como nas paletas desenhadas à mão. A cor que você digitou entra na escala exatamente como é, no passo de luz mais próximo.

As combinações giram o tom no círculo de cores: a complementar fica no lado oposto (180°), as análogas ao lado (30° para cada lado), a tríade divide o círculo em três (120°) e a tétrade em quatro (90°). São pontos de partida: ajuste a luz e a saturação para cada uso.

Exemplo com #3b82f6

A cor entra no passo de luz mais próximo da escala

Complementar: #3b82f6 e o laranja oposto no círculo

Variáveis CSS: --cor-50 a --cor-950

Fonte: Björn Ottosson: o espaço de cor OKLab

Perguntas frequentes

Como escolher quais tons usar?

Um padrão comum: os tons 50 a 100 para fundos, 500 a 600 para botões e links, e 700 a 900 para texto. Confira o contraste entre o texto e o fundo no verificador de contraste antes de fechar a paleta.

Por que a escala não usa HSL?

Porque no HSL a mesma luminosidade parece muito diferente conforme o tom: um amarelo com 50% de luz parece bem mais claro que um azul com 50%. No OKLCH, a luz acompanha a percepção, e a escala fica equilibrada para qualquer cor.

Como usar a escala no Tailwind?

No Tailwind 4, cole o bloco copiado no seu CSS principal: o @theme cria as classes bg-marca-500, text-marca-700 e as demais. Troque "marca" pelo nome que quiser.

Guias sobre este assunto

Outras ferramentas que podem ajudar

Ver tudo em Front-end e design