Gerador de Paleta de Cores HEX

Comece com uma cor HEX e gere uma paleta completa com escala tonal, cores harmônicas, tokens semânticos e variáveis CSS prontas para copiar.

Cor Base (HEX)

Suporta #RGB ou #RRGGBB, por exemplo #0EA5E9

Cor Base (HEX)

Presets Rápidos

Visão Geral da Paleta

Veja as relações da sua cor base e construa um sistema consistente mais rápido.

Cor Base (HEX)

#2563EB

Matiz: 221Saturação: 83%Luminosidade: 53%

Cores Harmônicas

Análogo A

#45C7E4

Análogo B

#6345E4

Complementar

#E6AB2A

Triádico A

#E2386D

Triádico B

#6DE238

Escala Tonal (50 - 900)

Tons de claro a escuro prontos para fundos, bordas, estados e contraste de texto.

#F4F6FB

100

#D1DBF1

200

#ABBFEB

300

#82A2E7

400

#5583E8

500

#2563EB

600

#124BC7

700

#0D3794

800

#082462

900

#04112F

Tokens Semânticos

Use esses papéis diretamente na UI para manter a consistência visual do produto e da marca.

Primary

Cor principal da marca e CTA

#2563EB

Secondary

Cor de marca secundária

#6C59D5

Accent

Destaques de alto contraste

#E3AA2D

Background

Tom de fundo da página

#F7F7F8

Surface

Fundo de cartões e contêineres

#E8E9EE

Text

Cor padrão do texto

#1B212C

Variáveis CSS

Copie uma vez e adicione à sua folha de estilos.

:root {
  --color-primary: #2563EB;
  --color-secondary: #6C59D5;
  --color-accent: #E3AA2D;
  --color-background: #F7F7F8;
  --color-surface: #E8E9EE;
  --color-text: #1B212C;
  --color-primary-50: #F4F6FB;
  --color-primary-100: #D1DBF1;
  --color-primary-200: #ABBFEB;
  --color-primary-300: #82A2E7;
  --color-primary-400: #5583E8;
  --color-primary-500: #2563EB;
  --color-primary-600: #124BC7;
  --color-primary-700: #0D3794;
  --color-primary-800: #082462;
  --color-primary-900: #04112F;
}