Cor para Variáveis CSS

Gerar variáveis, tons e tokens CSS de qualquer cor.

Cor base

Escala de tons (50 → 900)

eff0fe

100

e0e0fc

200

c1c2f9

300

a1a3f7

400

8285f4

500

6366f1

600

4f52c1

700

3b3d91

800

282960

900

141430

HEX

#6366F1

RGB

rgb(99, 102, 241)

HSL

hsl(239, 84%, 67%)

CSS gerado

:root {
  --color-50: #eff0fe;
  --color-100: #e0e0fc;
  --color-200: #c1c2f9;
  --color-300: #a1a3f7;
  --color-400: #8285f4;
  --color-500: #6366f1;
  --color-600: #4f52c1;
  --color-700: #3b3d91;
  --color-800: #282960;
  --color-900: #141430;
  --color: #6366f1;
}

Como funciona

Escolha uma cor base.
A ferramenta gera propriedades personalizadas CSS, tons claros, tons escuros e tokens a partir dela.
Pré-visualize a escala de tonalidades.
Copie as variáveis CSS para a sua folha de estilo.

Para que serve

Montar uma escala de cores para um design system.
Gerar tons claros e escuros a partir de uma cor de marca.
Produzir propriedades personalizadas CSS prontas para colar.

Bom saber

As tonalidades são geradas algoritmicamente; um designer ainda pode ajustar passos individuais para uniformidade perceptual.
Ele produz tokens de cor, tokens de layout e espaçamento estão fora do escopo.

Perguntas frequentes

O que ele gera a partir de uma cor?

Um conjunto de propriedades personalizadas CSS mais tons claros e escuros (uma escala de cores), prontos para inserir numa folha de estilo como design tokens.

As tonalidades são perceptualmente uniformes?

Elas seguem um algoritmo consistente de luminosidade, que é um ótimo ponto de partida; ajuste passos individuais se a sua marca precisa de valores exatos.

Algo é enviado?

Não. Tudo é gerado localmente no seu navegador.

Ferramentas relacionadas

Visualizador de G-code

Formatador JSON

Pré-visualizador Markdown

Codificador de Entidades HTML

Gerador de UUID