Gerador de Tons Claros e Escuros
Gere tons claros (mais claros) e tons escuros (mais escuros) de qualquer cor hex. Visualize amostras de cores e copie códigos hex para seu sistema de design.
Tints (lighter →)
Tint 1#eff0fe
Tint 2#e0e0fc
Tint 3#d0d1fb
Tint 4#c1c2f9
Tint 5#b1b3f8
Tint 6#a1a3f7
Tint 7#9294f5
Tint 8#8285f4
Tint 9#7375f2
Base
Base#6366f1
(← darker) Shades
Shade 1#595cd9
Shade 2#4f52c1
Shade 3#4547a9
Shade 4#3b3d91
Shade 5#323379
Shade 6#282960
Shade 7#1e1f48
Shade 8#141430
Shade 9#0a0a18
Full scale (click to copy)
Como Usar Gerador de Tons Claros e Escuros
- 1Insira uma cor hex base ou selecione com o seletor de cores.
- 2Escolha o número de tons claros e tons escuros a gerar.
- 3Visualize as amostras de cores do claro para o escuro.
- 4Clique em qualquer amostra para copiar seu código hex.
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
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. Um shade é criado adicionando preto a uma cor, tornando-a mais escura. Um tone é criado adicionando cinza. No design digital, tints e shades são usados para criar escalas de cores coesas para componentes de UI — tints mais claros para fundos, valores médios para botões e elementos interativos, shades mais escuros para texto e bordas. Sistemas de design como Tailwind CSS usam escalas de 10 passos (50, 100, 200, ... 900).
Como os tints e shades são calculados?▾
Este gerador usa interpolação linear entre a cor base e branco (para tints) ou preto (para shades). Cada passo mistura a cor base com branco ou preto em uma porcentagem igual. Por exemplo, com 9 passos: tint 1 é 10% base + 90% branco, tint 5 é 50/50, tint 9 é 90% base + 10% branco. Isso produz passos perceptualmente consistentes no espaço de cores sRGB.
Como uso essas cores no CSS?▾
Você pode colar os códigos hex diretamente no CSS ou defini-los como propriedades CSS customizadas: --color-100: #f5f3ff; --color-500: #7c3aed; --color-900: #1e0a4b; etc. Então referencie-os com var(--color-500). Para Tailwind CSS, você pode adicionar a escala gerada ao seu tailwind.config.js em theme.colors. Para design tokens, exporte como objeto JSON para uso no Figma, Storybook ou ferramentas de design token.
Devo usar HSL em vez de RGB para escalas de cores?▾
HSL (matiz, saturação, luminosidade) é frequentemente preferido para gerar escalas perceptualmente uniformes. Ajustar a luminosidade em HSL enquanto mantém matiz e saturação constantes produz cores de aparência consistente. No entanto, a interpolação sRGB (o que esta ferramenta usa) é mais simples e produz resultados previsíveis para design de UI. Para espaços de cores perceptuais mais avançados, considere OKLCH ou LCH, que são suportados no CSS moderno.
Como exporto essas cores para o Figma?▾
No Figma, você pode criar uma biblioteca de cores fazendo um frame com retângulos para cada amostra de cor e adicionando os valores hex como rótulos. Então clique com o botão direito → Criar Componente para cada um, e publique na sua biblioteca de equipe. Como alternativa, use a exportação "Variáveis CSS" e cole em um plugin do Figma como Design Tokens ou Token Studio. Copie as variáveis CSS geradas desta ferramenta e cole-as diretamente no plugin.