Gerador de Cores CSS

Transforme uma cor base em uma escala de 10 tons e exporte como variáveis CSS.

100% privado — tudo roda no seu navegador

Processamento local

Cor base

Escala de cores

Clique em uma amostra para copiar o hex

Variáveis CSS

:root {
  --color-50: #F5F9FF;
  --color-100: #E2ECFE;
  --color-200: #BAD3FC;
  --color-300: #8DB7FA;
  --color-400: #5E99F8;
  --color-500: #3B82F6;
  --color-600: #306BCA;
  --color-700: #26539D;
  --color-800: #1B3B6F;
  --color-900: #112445;
}

Como usar

1
Digite uma cor base ou escolha visualmente.
2
Uma escala de 10 níveis, de 50 (mais claro) a 900 (mais escuro), é gerada na hora.
3
Clique em qualquer amostra para copiar aquele valor hex individual.
4
Copie o bloco completo de propriedades personalizadas CSS para o seu projeto.

Exemplos

Escala a partir de #3B82F6

Entrada

#3B82F6

Saída

--color-50 #F5F9FF … --color-500 #3B82F6 … --color-900 #112445

Pronto para o CSS

Entrada

Cole o bloco copiado

Saída

:root { --color-500: #3B82F6; … }

Perguntas frequentes

Como a escala é gerada?

Os níveis 50–400 são misturados em direção ao branco (tons claros), 600–900 em direção ao preto (tons escuros) e 500 mantém sua cor base inalterada.

Como uso as variáveis?

Cole o bloco no topo de uma folha de estilos e referencie qualquer nível com var(--color-500) no seu CSS.

Minha cor é enviada a um servidor?

Não — a escala é gerada localmente no seu navegador.

Ferramentas relacionadas

Gerador de GradientesCrie gradientes CSS lineares e radiais visualmente e copie o código CSS.Seletor de CorEscolha qualquer cor e copie os valores HEX, RGB, HSL e HSV na hora.Verificador de ContrasteVerifique na hora a razão de contraste WCAG entre cores de texto e fundo.HEX para RGBConverta códigos HEX em valores RGB na hora — grátis e privado.RGB para HEXConverta valores RGB em um código HEX na hora — grátis e privado.Conversor de CoresConverta entre os formatos HEX, RGB, HSL, HSV e HWB em qualquer direção.