Web UtilitiesGerador de Tons e Sombras de Cor
Gere tons, sombras e tonalidades a partir de qualquer cor base. Crie escalas de cor no estilo Tailwind 50–950, copie variáveis CSS e construa paletas completas de sistemas de design instantaneamente.
hsl(217, 91%, 60%)
210
Cor Base
#3B82F6
Propriedades CSS Personalizadas
:root {
--tint-1: #DFEAFD;
--tint-2: #BED6FC;
--tint-3: #9EC1FA;
--tint-4: #7DADF9;
--tint-5: #5D98F7;
--color-base: #3B82F6;
--shade-1: #0B64F4;
--shade-2: #0950C3;
--shade-3: #073C92;
--shade-4: #052861;
--shade-5: #021431;
/* Tones */
--tone-1: #4C87E6;
--tone-2: #5B8BD7;
--tone-3: #6B8EC7;
--tone-4: #7A92B8;
--tone-5: #8A95A8;
}Tons
#DFEAFD
#BED6FC
#9EC1FA
#7DADF9
#5D98F7
Sombras
Base#3B82F6
#0B64F4
#0950C3
#073C92
#052861
#021431
Tonalidades
#4C87E6
#5B8BD7
#6B8EC7
#7A92B8
#8A95A8
Clique em qualquer amostra para copiar seu valor HEX
Ferramentas Relacionadas
Sobre o Gerador de Tons e Sombras
Como Funciona
- Insira ou selecione qualquer cor base usando o seletor de cores ou o campo HEX.
- Escolha o número de passos para gerar tons e sombras.
- Alterne entre o modo Clássico e o modo Tailwind (paradas 50–950).
- Clique em qualquer amostra para copiar seu valor HEX imediatamente.
- Use Copiar Tudo como CSS para obter a paleta completa como propriedades CSS.
Casos de Uso Comuns
- Construir paletas de cores de sistemas de design para frameworks UI.
- Gerar escalas de cores compatíveis com Tailwind CSS.
- Criar rampas de cores acessíveis que mantenham a identidade da marca.
- Explorar como uma cor de marca aparece em todos os níveis de luminosidade.
- Produzir tokens de cor para entregas de design no Figma ou Storybook.
Perguntas Frequentes
O que é um tom de cor?
Um tom é criado adicionando branco a uma cor base, tornando-a mais clara e menos saturada. Os tons mantêm o matiz original mas aumentam a luminosidade, produzindo variações similares a pastéis, ideais para fundos e acentos sutis de UI.
O que é uma sombra de cor?
Uma sombra é criada adicionando preto a uma cor base, tornando-a mais escura. As sombras mantêm o matiz original enquanto reduzem a luminosidade, sendo usadas para texto, bordas, estados pressionados e fundos escuros.
O que é uma tonalidade de cor?
Uma tonalidade é criada adicionando cinza a uma cor base, reduzindo a saturação sem alterar significativamente a luminosidade. As tonalidades produzem variações mais suaves, adequadas para componentes UI neutros.
O que é o modo de paleta estilo Tailwind?
O modo Tailwind gera 11 paradas rotuladas 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 e 950, espelhando a convenção de nomenclatura do Tailwind CSS para criar famílias de cores para tailwind.config.js.
Como uso as variáveis CSS geradas?
A ferramenta produz um bloco :root { } com propriedades CSS personalizadas para cada cor gerada. Copie-as para sua folha de estilos global e referencie com var(--tint-1), var(--shade-3), var(--color-500), etc.
Quantos passos posso gerar?
No modo Clássico você pode escolher entre 2 e 10 passos. O modo Tailwind sempre produz a escala fixa de 11 paradas.
Posso copiar valores de cor individuais?
Sim. Clique em qualquer amostra para copiar imediatamente seu valor HEX. Você também pode usar o botão Copiar Tudo como CSS para obter toda a paleta de uma vez.
Quais formatos de cor a ferramenta suporta?
Você pode inserir qualquer cor HEX de 6 dígitos (ex: #3B82F6) no campo de texto ou usar o seletor de cor nativo do navegador. Todos os valores de saída estão em formato HEX.
A paleta gerada é acessível?
A ferramenta gera cores com espaçamento perceptivo, mas a conformidade com WCAG depende de como você combina cores de texto e fundo. Use a ferramenta Verificador de Acessibilidade de Cor para verificar os índices de contraste.
Como essa ferramenta é útil para sistemas de design?
Sistemas de design geralmente requerem uma escala completa de cores para cada cor de marca. Esta ferramenta automatiza esse processo — insira sua cor de marca e obtenha uma escala completa para Figma, Style Dictionary ou tailwind.config.js.
Esta ferramenta armazena minhas cores?
Não. Todos os cálculos de cor ocorrem inteiramente no seu navegador usando JavaScript. Nenhum dado é enviado a um servidor e nada é armazenado entre sessões.
Qual é a diferença entre tons/sombras e um gradiente?
Um gradiente é uma transição visual suave entre duas ou mais cores. Tons e sombras são paradas de cor discretas e nomeadas dentro de uma família de matiz única, usadas como valores individuais em tokens de design.