Gerador de Tonalidade e Sombra de Cores

Gere tonalidades (mais claras) e sombras (mais escuras) de qualquer cor hex. Cria uma paleta de 10 passos para sistemas de design, escalas de cores estilo Tailwind e variáveis CSS.

Base Color

Color Scale

#f0f6fe

100

#e2ecfe

200

#c5dafc

300

#99befa

400

#5e99f7

500

#1f71f4

600

#0a58d6

700

#0846aa

800

#063684

900

#052861

950

#031a3f

Export

Name:

:root {
  --color-brand-50: #f0f6fe;
  --color-brand-100: #e2ecfe;
  --color-brand-200: #c5dafc;
  --color-brand-300: #99befa;
  --color-brand-400: #5e99f7;
  --color-brand-500: #1f71f4;
  --color-brand-600: #0a58d6;
  --color-brand-700: #0846aa;
  --color-brand-800: #063684;
  --color-brand-900: #052861;
  --color-brand-950: #031a3f;
}

Como Usar Gerador de Tonalidade e Sombra de Cores

1Insira uma cor hex base ou use o seletor de cores.
2Veja 10 tonalidades (variantes mais claras) e 10 sombras (variantes mais escuras).
3Clique em qualquer amostra para copiar seu valor hex.
4Exporte propriedades personalizadas ou configuração do Tailwind.

ZenovayAnalytics

Transforme seu tráfego em clientes.

Acompanhamento de visitantes em tempo real
Privacidade em primeiro lugar, sem banner de cookies
Configurado em dois minutos

Conheça o Zenovay

Ferramentas Relacionadas

Gerador de Gradientes CSS

Crie belos gradientes CSS com um editor visual. Gradientes lineares, radiais e cônicos.

Gerador de CSS Box Shadow

Projete sombras CSS box-shadow com controles visuais. Ajuste o deslocamento, desfoque, espalhamento e cor.

Gerador de CSS Border Radius

Crie valores personalizados de border radius com controles visuais. Vincule ou desvinque os cantos para ajuste rápido.

Área de Testes CSS Flexbox

Aprenda e gere layouts CSS Flexbox visualmente. Ajuste direção, alinhamento, quebra de linha e espaçamento em tempo real.

Perguntas Frequentes

Qual é a diferença entre tint e shade?▾

Um tint é criado adicionando branco a uma cor — tornando-a mais clara enquanto preserva o matiz. Um shade é criado adicionando preto — tornando-a mais escura. Juntos, tints e shades formam uma escala de cores. Sistemas de design modernos (como Tailwind CSS, Material Design e Ant Design) usam escalas de 50 a 900, onde 50 é o tint mais claro e 900 é o shade mais escuro. A cor base fica tipicamente em torno de 500 ou 600.

Como o Tailwind CSS usa escalas de cores?▾

O Tailwind CSS fornece uma escala de 11 passos (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950) para cada cor nomeada. Ao criar cores de marca personalizadas, você estende a configuração do Tailwind com sua própria escala. Esta ferramenta gera escalas compatíveis com o formato do Tailwind. Você pode copiar o output como objeto de configuração do Tailwind ou como propriedades CSS customizadas (--color-brand-50 a --color-brand-900).

O que é o espaço de cores HSL?▾

HSL (Matiz, Saturação, Luminosidade) representa cores de forma intuitiva para gerar escalas. Matiz (0–360°) é o ângulo da cor na roda de cores. Saturação (0–100%) é a intensidade da cor — 0% é cinza. Luminosidade (0–100%) é o brilho — 0% é preto, 100% é branco. Para criar tints, aumente a luminosidade em direção a 100%. Para criar shades, diminua em direção a 0%. Isso produz escalas perceptualmente mais consistentes do que a mistura RGB.

Qual é a diferença entre os métodos de geração de shade?▾

Interpolação linear (mistura com branco/preto): simples, mas pode parecer desbotada ou turva nos extremos. Ajuste de luminosidade HSL: mais perceptualmente uniforme, mas pode super-saturar shades escuros. Ajustado por croma (OKLCH/LCH): o mais perceptualmente preciso — mantém luminosidade percebida consistente. Ferramentas como Radix UI e shadcn/ui usam OKLCH para seus sistemas de cores. Esta ferramenta usa HSL, que oferece um bom equilíbrio entre precisão e compatibilidade.

Como uso escalas de cores no CSS?▾

Defina cores como propriedades CSS customizadas (variáveis): :root { --color-brand-50: #eff6ff; --color-brand-500: #3b82f6; }. Em seguida, use-as como var(--color-brand-50) nos seus estilos. Para modo escuro, redefina as mesmas variáveis em um @media (prefers-color-scheme: dark) ou classe .dark. Propriedades CSS customizadas fazem cascata e podem ser sobrescritas em qualquer nível do DOM, tornando-as poderosas para tematização.