Cores do Tailwind
A paleta completa de cores do Tailwind CSS v4 - todas as cores, todas as tonalidades, com padrões de uso e personalização.
//
Busque em todas as páginas da documentação
A paleta completa de cores do Tailwind CSS v4 - todas as cores, todas as tonalidades, com padrões de uso e personalização.
🤖 Read the SystemsArchitect.io Blog for over 100+ cloud architecture articles 🔥
Referência rápida - use qualquer cor com qualquer utilitário.
// Texto
<p className="text-blue-500">Texto azul</p>
<p className="text-red-600">Texto vermelho</p>
// Fundo
<div className="bg-emerald-100">Fundo verde-claro</div>
<div className="bg-slate-900">Fundo cinza-escuro</div>
// Borda
<div className="border border-gray-300">Borda cinza</div>
// Anel
<button className="ring-2 ring-indigo-500">Anel índigo</button>
// Opacidade arbitrária
<div className="bg-blue-500/50">Azul com 50% de opacidade</div>
<div className="text-red-600/75">Texto vermelho com 75% de opacidade</div>Quando usar isso: Sempre que precisar de cor - fundos, texto, bordas, sombras, anéis, gradientes, divisores, placeholders.
export function ColorShowcase() {
const colors = [
{ name: "red", class: "bg-red-500" },
{ name: "orange", class: "bg-orange-500" },
{ name: "amber", class: "bg-amber-500" },
{ name: "yellow", class: "bg-yellow-500" },
{ name: "lime", class: "bg-lime-500" },
{ name: "green", class: "bg-green-500" },
{ name: "emerald", class: "bg-emerald-500" },
{ name: "teal", class: "bg-teal-500" },
{ name: "cyan", class: "bg-cyan-500" },
{ name: "sky", class: "bg-sky-500" },
{ name: "blue", class: "bg-blue-500" },
{ name: "indigo", class: "bg-indigo-500" },
{ name: "violet", class: "bg-violet-500" },
{ name: "purple", class: "bg-purple-500" },
{ name: "fuchsia", class: "bg-fuchsia-500" },
{ name: "pink", class: "bg-pink-500" },
{ name: "rose", class: "bg-rose-500" },
];
return (
<div className="grid grid-cols-6 gap-2">
{colors.map(({ name, class: cls }) => (
<div key={name} className="text-center">
<div className={`h-12 w-full rounded ${cls}`} />
<span className="text-xs text-gray-600 mt-1">{name}</span>
</div>
))}
</div>
);
}O que isso demonstra:
-500 como a tonalidade de referência "base" para cada corPasse o mouse para ver o código hexadecimal. Clique em qualquer amostra para copiar.
Hover to see hex value. Click any swatch to copy.
oklch() para uniformidade perceptual.@theme.text-, bg-, border-, ring-, shadow-, divide-, outline-, accent-, caret-, fill-, stroke-./opacidade para transparência: bg-blue-500/50.| Cor | Descrição | Uso |
|---|---|---|
slate | Cinza azulado frio | UI padrão, aplicativos profissionais |
gray | Neutro com leve calor | Uso geral, mais comum |
zinc | Cinza neutro verdadeiro | Design minimalista, moderno |
neutral | Neutro puro (sem matiz) | Designs estritamente monocromáticos |
stone | Cinza bege quente | Designs quentes e orgânicos |
Referência de tonalidade para cinzas:
/* slate */
slate-50 /* mais claro - fundos */
slate-100 /* fundos claros, estados de hover */
slate-200 /* bordas, divisores */
slate-300 /* texto desativado, placeholder */
slate-400 /* texto placeholder */
slate-500 /* texto secundário */
slate-600 /* texto do corpo (modo claro) */
slate-700 /* títulos (modo claro) */
slate-800 /* fundos escuros */
slate-900 /* fundos mais escuros */
slate-950 /* quase preto */Cores Quentes:
| Cor | Tonalidades | Melhor para |
|---|---|---|
red | 50-950 | Erros, ações destrutivas, alertas |
orange | 50-950 | Avisos, atenção, energia |
amber | 50-950 | Cautela, calor, notificações |
yellow | 50-950 | Destaques, estrelas, avaliações |
Cores da Natureza:
| Cor | Tonalidades | Melhor para |
|---|---|---|
lime | 50-950 | Acentos frescos e energéticos |
green | 50-950 | Sucesso, confirmação, positivo |
emerald | 50-950 | Crescimento, prosperidade, finanças |
teal | 50-950 | Calma, profissional, saúde |
Cores Frias:
| Cor | Tonalidades | Melhor para |
|---|---|---|
cyan | 50-950 | Informação, tecnologia, temas aquáticos |
sky | 50-950 | Interfaces leves, arejadas, abertas |
blue | 50-950 | Ações primárias, links, confiança |
indigo | 50-950 | Criatividade, profundidade, estados de foco |
Cores Roxas/Rosa:
| Cor | Tonalidades | Melhor para |
|---|---|---|
violet | 50-950 | Premium, criatividade, recursos de IA |
purple | 50-950 | Realeza, luxo, branding |
fuchsia | 50-950 | Divertido, ousado, gradientes |
pink | 50-950 | Suave, amigável, social |
rose | 50-950 | Amor, favoritos, corações |
// Preto e branco
<div className="bg-black text-white">Preto/branco puro</div>
// Transparente
<div className="bg-transparent">Sem fundo</div>
// Cor atual (herda)
<svg className="fill-current text-blue-500">...</svg>| Tonalidade | Uso em Modo Claro | Uso em Modo Escuro |
|---|---|---|
| 50 | Fundos sutis, hover | - |
| 100 | Fundos de cartão, selecionado | - |
| 200 | Bordas, divisores | Texto sutil |
| 300 | Bordas de hover | Texto suave |
| 400 | Texto placeholder | Texto do corpo |
| 500 | Ícones, texto secundário | Ícones |
| 600 | Texto do corpo, rótulos | Estados de hover |
| 700 | Títulos, ênfase | Bordas |
| 800 | - | Fundos de cartão |
| 900 | - | Fundos de página |
| 950 | - | Fundos profundos |
Cores personalizadas via @theme:
/* app/globals.css */
@theme {
--color-brand-50: oklch(0.98 0.02 250);
--color-brand-100: oklch(0.95 0.04 250);
--color-brand-200: oklch(0.90 0.08 250);
--color-brand-300: oklch(0.82 0.12 250);
--color-brand-400: oklch(0.72 0.16 250);
--color-brand-500: oklch(0.60 0.20 250);
--color-brand-600: oklch(0.50 0.18 250);
--color-brand-700: oklch(0.42 0.15 250);
--color-brand-800: oklch(0.35 0.12 250);
--color-brand-900: oklch(0.28 0.10 250);
--color-brand-950: oklch(0.18 0.07 250);
}// Agora disponível como utilitários
<button className="bg-brand-500 hover:bg-brand-600 text-white">
Marca Personalizada
</button>Substituindo cores padrão:
@theme {
/* Substitua o azul padrão pelo azul da sua marca */
--color-blue-500: oklch(0.55 0.22 260);
--color-blue-600: oklch(0.48 0.20 260);
}Removendo cores padrão:
@theme {
/* Remova cores que você não usa para reduzir a carga cognitiva */
--color-lime-*: initial;
--color-fuchsia-*: initial;
--color-cyan-*: initial;
}Aliases de cores semânticas com variáveis CSS:
@theme {
--color-success: var(--color-green-500);
--color-warning: var(--color-amber-500);
--color-error: var(--color-red-500);
--color-info: var(--color-blue-500);
}<span className="text-success">Salvo!</span>
<span className="text-error">Falha ao salvar</span>Gradientes com cores:
// Gradiente linear
<div className="bg-gradient-to-r from-blue-500 to-purple-500">
Gradiente
</div>
// Gradiente de três paradas
<div className="bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500">
Múltiplas paradas
</div>
// Texto com gradiente
<h1 className="bg-gradient-to-r from-blue-600 to-violet-600 bg-clip-text text-transparent">
Título com Gradiente
</h1>Cor com modificadores de opacidade:
// Opacidade do fundo
<div className="bg-blue-500/10">Fundo azul muito sutil</div>
<div className="bg-blue-500/25">Fundo azul claro</div>
<div className="bg-blue-500/50">Azul com 50% de opacidade</div>
<div className="bg-blue-500/75">Azul quase opaco</div>
// Opacidade da borda
<div className="border border-red-500/50">Borda vermelha semitransparente</div>
// Sombra com cor
<div className="shadow-lg shadow-blue-500/25">Sombra azul brilhante</div>// Props de cor type-safe com literais de string
type Color =
| "red" | "orange" | "amber" | "yellow"
| "lime" | "green" | "emerald" | "teal"
| "cyan" | "sky" | "blue" | "indigo"
| "violet" | "purple" | "fuchsia" | "pink" | "rose"
| "slate" | "gray" | "zinc" | "neutral" | "stone";
type Shade = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950;
interface BadgeProps {
color: Color;
children: React.ReactNode;
}
// Nota: nomes de classe dinâmicos devem ser safelisted ou usar a prop style
// O Tailwind não consegue detectar `bg-${color}-500` em tempo de compilação
function Badge({ color, children }: BadgeProps) {
// Use um mapa de consulta em vez de template literals
const colorMap: Record<Color, string> = {
red: "bg-red-100 text-red-800",
blue: "bg-blue-100 text-blue-800",
green: "bg-green-100 text-green-800",
// ... etc
};
return (
<span className={`px-2 py-0.5 rounded text-sm ${colorMap[color]}`}>
{children}
</span>
);
}Nomes de classe dinâmicos não funcionam - bg-${color}-500 não será detectado pelo scanner do Tailwind em tempo de compilação. Correção: Use um objeto de mapa de consulta com strings de classe completas ou use a prop style com variáveis CSS.
Suporte do navegador para oklch - oklch é bem suportado em navegadores modernos, mas não no IE ou em versões muito antigas do Safari. Correção: O Tailwind v4 lida com fallbacks automaticamente, mas teste nos seus navegadores de destino.
Contraste de cores - Nem todas as combinações de tonalidades atendem aos requisitos de contraste do WCAG. Correção: Use combinações 50/900 ou 100/800 para contraste garantido. Use texto escuro (700+) em fundos claros (50-200) e texto claro (50-200) em fundos escuros (700+).
Muitas cores - A paleta completa tem 22 famílias de cores x 11 tonalidades = 242 cores. Correção: Escolha 1 cor primária, 1 neutra e 2-3 cores de destaque para o seu projeto. Remova cores não utilizadas com --color-name-*: initial.
Incompatibilidade de cores no modo escuro - Simplesmente trocar 500 por 400 no modo escuro nem sempre funciona porque a luminosidade oklch não é simétrica. Correção: Teste as cores do modo escuro visualmente, não apenas invertendo o número da tonalidade.
| Alternativa | Use Quando | Não Use Quando |
|---|---|---|
| Propriedades CSS personalizadas | Você precisa de alterações de cor em tempo de execução (temas, preferências do usuário) | Designs estáticos onde as classes do Tailwind são suficientes |
Prop style inline | Cores dinâmicas de entrada do usuário ou banco de dados | Cores estáticas, conhecidas com antecedência |
| Variáveis CSS do shadcn/ui | Usando componentes shadcn com temas | Não usando shadcn/ui |
| Radix Colors | Você precisa de suporte garantido ao gamut P3 e contraste garantido | Você já está investido na paleta do Tailwind |
11 tonalidades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950. A tonalidade 50 é a mais clara, 950 é a mais escura.
oklch() para uniformidade perceptual. Cores com o mesmo valor de luminosidade parecem igualmente brilhantes ao olho humano, ao contrário de hex ou HSL.
Anexe /opacidade: bg-blue-500/50 para 50% de opacidade, text-red-600/75 para 75%.
@theme {
--color-brand-50: oklch(0.98 0.02 250);
--color-brand-500: oklch(0.60 0.20 250);
--color-brand-900: oklch(0.28 0.10 250);
}Em seguida, use bg-brand-500, text-brand-900, etc.
@theme {
--color-success: var(--color-green-500);
--color-error: var(--color-red-500);
}Uso: <span className="text-success">Salvo!</span>
<h1 className="bg-gradient-to-r from-blue-600 to-violet-600 bg-clip-text text-transparent">
Título com Gradiente
</h1>@theme {
--color-lime-*: initial;
--color-fuchsia-*: initial;
}bg-${color}-500 dinamicamente, mas a cor está faltando em produção. Por quê?O scanner do Tailwind não consegue detectar nomes de classe dinâmicos construídos com template literals. Use um mapa de consulta com strings de classe estáticas completas em vez disso.
A luminosidade oklch não é simétrica. Simplesmente trocar os números das tonalidades não produz resultados visualmente equivalentes. Sempre teste as cores do modo escuro visualmente.
type Color = "red" | "blue" | "green" | "amber";
interface BadgeProps {
color: Color;
children: React.ReactNode;
}Em seguida, use um mapa de consulta Record<Color, string> para obter a string de classe completa.
<div className="shadow-lg shadow-blue-500/25">Brilho azul</div>O /25 define a cor da sombra com 25% de opacidade azul.
@theme para cores personalizadasRevisado por Chris St. John·Última atualização: 16 de jul. de 2026
🤖 Read the SystemsArchitect.io Blog for over 100+ cloud architecture articles 🔥