Gerador de tons de cor
Transforme uma cor em uma escala 50–950 no estilo Tailwind, além de tints, shades e tones. Calculado em OKLCH e sRGB, exportado como variáveis CSS, Tailwind ou JSON.
Configurações de tonalidades
Exportar
A escala 50–950 mantém sua cor como 500 e ajusta a luminosidade e o croma OKLCH dos outros passos, preservando o matiz.
Escala 50–950
Tints, shades e tons
Mistura em sRGB como color-mix(in srgb, …) em passos iguais; clique em uma cor para copiá-la.
:root {
--brand-50: #eef5ff;
--brand-100: #e1edff;
--brand-200: #c9deff;
--brand-300: #a3c6ff;
--brand-400: #73a8ff;
--brand-500: #3b82f6;
--brand-600: #266ad8;
--brand-700: #1554b8;
--brand-800: #074095;
--brand-900: #002d72;
--brand-950: #012156;
}Ferramentas Relacionadas
Ver TodasO que é Gerador de tons de cor?
Expande uma única cor em uma escala de 11 passos de 50 a 950, como as paletas do Tailwind, e em linhas de tints (misturados com branco), shades (misturados com preto) e tones (misturados com cinza). Todos os valores podem ser copiados individualmente ou exportados como variáveis CSS, SCSS, Tailwind v3/v4 ou JSON.
Como usar Gerador de tons de cor
- Informe a cor base.
- Leia a escala 50–950; a sua cor é o passo 500.
- Defina o número de passos de tint / shade / tone para as linhas de mistura.
- Clique em qualquer amostra para copiá-la.
- Escolha um formato de exportação e um nome de token e copie a escala.
Exemplo
#3b82f6, CSS variables, token name brand
:root {
--brand-50: #eef5ff;
--brand-100: #e1edff;
--brand-200: #c9deff;
--brand-300: #a3c6ff;
--brand-400: #73a8ff;
--brand-500: #3b82f6;
--brand-600: #266ad8;
--brand-700: #1554b8;
--brand-800: #074095;
--brand-900: #002d72;
--brand-950: #012156;
} Quando usar Gerador de tons de cor
Use-o para montar uma rampa de cores completa para um design system ou tema do Tailwind a partir de uma cor de marca, ou para obter variantes de hover/ativo. A escala é um ponto de partida algorítmico sensato; em design systems de produção, você ainda pode ajustar passos individuais e conferir o contraste para uso em texto.
Como funciona Gerador de tons de cor
Na escala, a cor base é convertida para OKLCH e mantida sem alteração no 500. Os passos mais claros movem a luminosidade uma fração fixa do caminho em direção a 0,985 (95%, 88%, 75%, 55%, 30% para 50–400) e reduzem o croma; os mais escuros vão em direção a 0,2 (18%–85% para 600–950) com croma levemente reduzido. O matiz é mantido e cada passo passa por mapeamento de gama para sRGB. Tints, shades e tones são misturas em sRGB com codificação gama, como color-mix(in srgb, …), em passos iguais de 1/(n+1).
Casos de Uso Comuns
- Rampas de cores personalizadas para o Tailwind
- Tokens de design system a partir de uma cor de marca
- Variantes de estado hover e pressionado
- Fundos e bordas em temas claro/escuro
- Tons suaves para ilustrações
Perguntas Frequentes
Qual a diferença entre tint, shade e tone?
Um tint é a cor misturada com branco, um shade é misturado com preto e um tone é misturado com cinza.
Por que minha cor fica no 500?
Como nas paletas do Tailwind, o 500 é o passo de referência; os passos mais claros (50–400) são usados em fundos e os mais escuros (600–950) em textos e bordas.
Isto vai bater exatamente com as cores nativas do Tailwind?
Não. As paletas do Tailwind foram ajustadas à mão; esta ferramenta gera algoritmicamente uma rampa parecida para qualquer cor.