//
Search across all documentation pages
The complete Tailwind CSS v4 color palette — all colors, all shades, with usage patterns and customization.
Quick-reference — use any color with any utility.
// Text
<p className="text-blue-500">Blue text</p>
<p className="text-red-600">Red text</p>
// Background
<div className="bg-emerald-100">Light emerald bg</div>
<div className="bg-slate-900">Dark slate bg</div>
// Border
<div className="border border-gray-300">Gray border</div>
// Ring
<button className="ring-2 ring-indigo-500">Indigo ring</button>
// Arbitrary opacity
<div className="bg-blue-500/50">50% opacity blue</div>
<div className="text-red-600/75">75% opacity red text</div>When to reach for this: Any time you need color — backgrounds, text, borders, shadows, rings, gradients, dividers, 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:
What this demonstrates:
-500 shade as the "base" reference shade for each colorHover to see hex. Click any swatch to copy.
Hover to see hex value. Click any swatch to copy.
oklch() color space for perceptual uniformity@theme blockstext-, bg-, border-, ring-, shadow-, divide-, outline-, accent-, caret-, fill-, stroke-/opacity for transparency: bg-blue-500/50| Color | Description | Usage |
|---|---|---|
slate | Cool blue-gray | Default UI, professional apps |
gray | Neutral with slight warmth | General purpose, most common |
zinc | True neutral gray | Minimal, modern designs |
neutral | Pure neutral (no hue) | Strictly monochrome designs |
stone | Warm beige-gray | Warm, organic designs |
Shade reference for grays:
/* slate */
slate-50 /* lightest - backgrounds */
slate-100 /* light backgrounds, hover states */
slate-200 /* borders, dividers */
slate-300 /* disabled text, placeholder */
slate-400 /* placeholder text */
slate-500 /* secondary text */
slate-600 /* body text (light mode) */
slate-700 /* headings (light mode) */
slate-800 /* dark backgrounds */
slate-900 /* darkest backgrounds */
slate-950 /* near-black */Warm Colors:
| Color | Shades | Best for |
|---|---|---|
red | 50-950 | Errors, destructive actions, alerts |
orange | 50-950 | Warnings, attention, energy |
amber | 50-950 | Caution, warmth, notifications |
yellow | 50-950 | Highlights, stars, ratings |
Nature Colors:
| Color | Shades | Best for |
|---|---|---|
lime | 50-950 | Fresh, energetic accents |
green | 50-950 | Success, confirmation, positive |
emerald | 50-950 | Growth, prosperity, finance |
teal | 50-950 | Calm, professional, healthcare |
Cool Colors:
| Color | Shades | Best for |
|---|---|---|
cyan | 50-950 | Info, tech, water themes |
sky | 50-950 | Light, airy, open interfaces |
blue | 50-950 | Primary actions, links, trust |
indigo | 50-950 | Creative, deep, focus states |
Purple/Pink Colors:
| Color | Shades | Best for |
|---|---|---|
violet | 50-950 | Premium, creative, AI features |
purple | 50-950 | Royalty, luxury, branding |
fuchsia | 50-950 | Playful, bold, gradients |
pink | 50-950 | Soft, friendly, social |
rose | 50-950 | Love, favorites, hearts |
// Black and white
<div className="bg-black text-white">Pure black/white</div>
// Transparent
<div className="bg-transparent">No background</div>
// Current color (inherits)
<svg className="fill-current text-blue-500">...</svg>| Shade | Light Mode Use | Dark Mode Use |
|---|---|---|
| 50 | Subtle backgrounds, hover | — |
| 100 | Card backgrounds, selected | — |
| 200 | Borders, dividers | Subtle text |
| 300 | Hover borders | Muted text |
| 400 | Placeholder text | Body text |
| 500 | Icons, secondary text | Icons |
| 600 | Body text, labels | Hover states |
| 700 | Headings, emphasis | Borders |
| 800 | — | Card backgrounds |
| 900 | — | Page backgrounds |
| 950 | — | Deep backgrounds |
Custom colors 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);
// Now available as utilities
<button className="bg-brand-500 hover:bg-brand-600 text-white">
Custom Brand
</button>Overriding default colors:
@theme {
/* Replace the default blue with your brand blue */
--color-blue-500: oklch(0.55 0.22 260);
--color-blue-600: oklch(0.48 0.20 260);
}Removing default colors:
@theme {
/* Remove colors you don't use to reduce cognitive load */
--color-lime-*: initial;
--color-fuchsia-*: initial;
--color-cyan-*: initial;
}Semantic color aliases with CSS variables:
@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">Saved!</span>
<span className="text-error">Failed to save</span>Gradients with colors:
// Linear gradient
<div className="bg-gradient-to-r from-blue-500 to-purple-500">
Gradient
</div>
// Three-stop gradient
<div className="bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500">
Multi-stop
</div>
// Gradient text
<h1 className
Color with opacity modifiers:
// Background opacity
<div className="bg-blue-500/10">Very subtle blue bg</div>
<div className="bg-blue-500/25">Light blue bg</div>
<div className="bg-blue-500/50">Half opacity blue</div>
<div className="bg-blue-500/75"
// Type-safe color props with string literals
type Color =
| "red" | "orange" | "amber" | "yellow"
| "lime" | "green" | "emerald" | "teal"
| "cyan" | "sky" | "blue" | "indigo"
| "violet"
Dynamic class names don't work — bg-${color}-500 won't be detected by Tailwind's scanner at build time. Fix: Use a lookup map object with complete class strings, or use the style prop with CSS variables.
oklch browser support — oklch is well supported in modern browsers but not in IE or very old Safari. Fix: Tailwind v4 handles fallbacks automatically, but test in your target browsers.
Color contrast — Not all shade combinations meet WCAG contrast requirements. Fix: Use 50/900 or 100/800 combinations for guaranteed contrast. Use dark text (700+) on light backgrounds (50-200) and light text (50-200) on dark backgrounds (700+).
Too many colors — The full palette has 22 color families x 11 shades = 242 colors. Fix: Pick 1 primary, 1 neutral, and 2-3 accent colors for your project. Remove unused colors with --color-name-*: initial.
Dark mode color mismatch — Simply swapping 500 to 400 in dark mode doesn't always work because oklch lightness isn't symmetric. Fix: Test dark mode colors visually, don't just invert the shade number.
| Alternative | Use When | Don't Use When |
|---|---|---|
| CSS custom properties | You need runtime color changes (themes, user preferences) | Static designs where Tailwind classes suffice |
Inline style prop | Dynamic colors from user input or database | Static, known-ahead-of-time colors |
| shadcn/ui CSS variables | Using shadcn components with theming | Not using shadcn/ui |
| Radix Colors | You need automatic P3 gamut support and guaranteed contrast | You're already invested in Tailwind's palette |
11 shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950. Shade 50 is lightest, 950 is darkest.
oklch() for perceptual uniformity. Colors of the same lightness value appear equally bright to the human eye, unlike hex or HSL.
Append /opacity: bg-blue-500/50 for 50% opacity, text-red-600/75 for 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);
}Then use bg-brand-500, text-brand-900, etc.
@theme {
--color-success: var(--color-green-500);
--color-error: var(--color-red-500);
}Usage: <span className="text-success">Saved!</span>
<h1 className="bg-gradient-to-r from-blue-600 to-violet-600 bg-clip-text text-transparent">
Gradient Heading
</h1>@theme {
--color-lime-*: initial;
--color-fuchsia-*: initial;
}bg-${color}-500 dynamically but the color is missing in production. Why?Tailwind's scanner cannot detect dynamic class names constructed with template literals. Use a lookup map with complete static class strings instead.
oklch lightness is not symmetric. Simply swapping shade numbers does not produce visually equivalent results. Always test dark mode colors visually.
type Color = "red" | "blue" | "green" | "amber";
interface BadgeProps {
color: Color;
children: React.ReactNode;
}Then use a Record<Color, string> lookup map to get the full class string.
<div className="shadow-lg shadow-blue-500/25">Blue glow</div>The /25 sets the shadow color to 25% opacity blue.