colorize
ColorKit
CK

Gerador de Cores Tailwind CSS

Insira a cor primária da sua marca e calcularemos uma escala equilibrada de 50 a 950 para Tailwind CSS v3 ou v4.

Generated Scale

50

#F1F6FD

100

#E2ECFC

200

#C2D7F9

300

#9EC0F7

400

#75A6F6

500

#3B82F6

600

#1468F0

700

#0F50B9

800

#0C3679

900

#071938

950

#030A17

Component Preview

Buttons

Alerts & Badges

System Update

The server will restart in 5 minutes. (50/500/700/900)

Badge (100/800)Solid (600)

Como funciona a escala de tons do Tailwind

O Tailwind CSS adota uma escala de luminosidade de 50 a 950 para oferecer flexibilidade e consistência visual.

  • 50 - 100: Fundos sutis e caixas de destaque.
  • 200 - 400: Bordas discretas e elementos desativados.
  • 500 - 600: Botões de ação principal e cor padrão.
  • 700 - 950: Tipografia e superfícies escuras no dark mode.
Base de Conhecimento & FAQ

Perguntas Frequentes

Respostas e soluções diretas para dúvidas frequentes, desafios técnicos e padrões da indústria.

Como o Tailwind CSS calcula a sua escala de tons de 50 a 950?expand_more
A escala numérica do Tailwind organiza as tonalidades da mais clara para a mais escura:
  • 50–100: Tons pastéis luminosos (~90% a 95% de luminosidade) para planos de fundo e caixas de alerta.
  • 200–400: Tons médios suaves para bordas, divisores e fundos de hover.
  • 500–600: Cor base da marca (500) e tom de hover (600) para botões de destaque.
  • 700–900: Tons profundos para textos e áreas de alto contraste no modo escuro.
  • 950: Tom quase preto (~5% a 10% de luminosidade) para contêineres e painéis escuros.
Como adicionar tons personalizados no Tailwind CSS v3 vs. Tailwind CSS v4?expand_more
No Tailwind CSS v3 (configuração em JavaScript): Adicione a escala no tailwind.config.js dentro de theme.extend.colors: 
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#F0F9FF',
          500: '#0EA5E9',
          900: '#0C4A6E',
        }
      }
    }
  }
}
No Tailwind CSS v4 (CSS puro): Declare diretamente no CSS usando a diretiva @theme: 
@theme {
  --color-brand-50: #F0F9FF;
  --color-brand-500: #0EA5E9;
  --color-brand-900: #0C4A6E;
}
Por que simplesmente misturar branco ou preto desbota as cores?expand_more
Clarear ou escurecer de forma linear diminui a saturação, gerando tons desbotados e escuros sem vida. Paletas profissionais no Tailwind utilizam deslocamento de matiz (hue shifting): ao clarear, o matiz se move suavemente em direção à luz solar (tons quentes); ao escurecer, move-se em direção a sombras frias.
Qual tom do Tailwind é recomendado para títulos, corpo de texto e bordas?expand_more
Recomendações clássicas de hierarquia:
  • Títulos (H1–H3): text-slate-900 ou text-neutral-900 para contraste máximo.
  • Texto corrido: text-slate-700 ou text-neutral-600 para leitura agradável.
  • Legendas e notas: text-slate-500.
  • Bordas de cartões: border-slate-200 (modo claro) e border-slate-800 (modo escuro).