Gerador gratuito de paletas de cores HEX

Comece com uma cor e explore a paleta do seu site. Gere combinações, tons claros e escuros e cores por função, e copie as variáveis CSS para usar no seu projeto.

Cor base (HEX)

Insira #RGB ou #RRGGBB, por exemplo, #0EA5E9.

Cor base (HEX)

Cores predefinidas

Visão geral da paleta

Explore a cor base e as combinações geradas a partir dela.

Cor base (HEX)

#2563EB

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

Harmonias de cores

Análogo A

#45C7E4

Análogo B

#6345E4

Complementar

#E6AB2A

Triádico A

#E2386D

Triádico B

#6DE238

Escala tonal (50–900)

Explore tons claros e escuros para fundos, bordas e estados da interface.

#F4F6FB

100

#D1DBF1

200

#ABBFEB

300

#82A2E7

400

#5583E8

500

#2563EB

600

#124BC7

700

#0D3794

800

#082462

900

#04112F

Cores semânticas

Use cores com funções definidas para manter a paleta do site consistente.

Primária

Cor para ações principais

#2563EB

Secundária

Cor para elementos de apoio

#6C59D5

Destaque

Cor para destaques visuais

#E3AA2D

Fundo

Cor para fundos de páginas

#F7F7F8

Superfície

Cor para fundos de cartões

#E8E9EE

Texto

Cor para o texto principal

#1B212C

Variáveis CSS

Copie as cores semânticas e a escala tonal para a 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;
}

O que é um gerador de paletas de cores HEX?

É uma ferramenta que cria cores relacionadas a partir de um código HEX. Ela gera harmonias, uma escala tonal e seis cores semânticas, com variáveis CSS que você pode copiar.

Como gerar uma paleta de cores a partir de HEX

Escolha uma cor base, confira a paleta gerada e copie os valores necessários. Comece inserindo um código HEX, usando o seletor ou experimentando uma cor aleatória.

Etapa 1
Escolha a cor base
Insira um código HEX, use o seletor ou escolha Cor aleatória. Se digitar o código, clique em Gerar paleta para conferir o resultado.
Etapa 2
Confira a paleta de cores
Compare a cor base com cores análogas, complementares e triádicas. Veja quais combinações combinam com o site ou a marca.
Etapa 3
Explore tons e funções de cor
Confira os tons de 50 a 900 e as seis cores semânticas. Escolha a luminosidade e a função adequadas para cada parte da interface.
Etapa 4
Copie cores e variáveis CSS
Copie valores individuais ou as variáveis CSS geradas. Cole na folha de estilos para usar as cores no site ou no sistema de design.

Uma paleta, seis formas de usar

Escolha cores para fundos, botões e textos a partir de uma mesma paleta. Veja seis maneiras de levar as cores geradas para o design do seu site.

Fundos e bordas

Compare tons claros e escuros para fundos de páginas, cartões e bordas. Use a escala para orientar as cores do seu site.

Estados de hover

Escolha cores para botões e links ao passar o cursor. Antes de aplicar, confira como cada combinação funciona na sua interface.

Interfaces de produto

Use as cores primária, secundária, de destaque, fundo, superfície e texto por função. Mantenha os mesmos papéis em toda a interface.

Paletas da marca

Parta da cor da marca e compare cores análogas, complementares e triádicas. Use as opções para definir as cores do site.

Sistemas de design

Copie cores e tons para o sistema de design. Componentes que você reutiliza podem compartilhar os mesmos valores de cor.

Folhas de estilo CSS

Cole as variáveis CSS na folha de estilos e faça referência a elas. Use a mesma definição de cor nas páginas e nos componentes do site.

Da escolha da cor ao CSS, em um só lugar

Compare harmonias, tons e cores com funções definidas sem sair do gerador. A ferramenta é gratuita e permite copiar valores individuais ou variáveis CSS para o seu projeto.

Mais combinações a partir de uma cor

Gere cores análogas, complementares e triádicas do seu HEX. Compare as combinações para escolher as cores do seu site.

Tons do claro ao escuro

Confira os tons numerados de 50 a 900, do claro ao escuro. Escolha cores para fundos, bordas e outros elementos da sua interface.

Seis cores com funções definidas

Use seis cores: primária, secundária, destaque, fundo, superfície e texto. Cada uma tem um papel na paleta do site.

Variáveis CSS prontas para copiar

Copie as cores semânticas e os tons como variáveis CSS. Cole na folha de estilos para usar os valores nos diferentes elementos do site.

Perguntas frequentes

É uma ferramenta que cria cores relacionadas a partir de um código HEX. Ela gera harmonias, uma escala tonal e seis cores semânticas, com variáveis CSS que você pode copiar.

Insira um código HEX válido de três ou seis dígitos e clique em Gerar paleta. Você também pode usar o seletor, escolher uma cor predefinida ou selecionar Cor aleatória.

A escala tonal oferece tons claros e escuros numerados de 50 a 900. Use como ponto de partida para fundos, bordas e estados de hover. Confira o contraste do texto no design final.

Clique em Copiar no painel de variáveis CSS e cole na folha de estilos. Faça referência às variáveis nas regras CSS para aplicar as cores semânticas e os tons.

Gerador gratuito de paletas de cores HEX

O que é um gerador de paletas de cores HEX?

Como gerar uma paleta de cores a partir de HEX

Escolha a cor base

Confira a paleta de cores

Explore tons e funções de cor

Copie cores e variáveis CSS