Full Tailwind v3 color reference — all shades 50–950. Click any swatch to copy.
Tailwind CSS Color Palette is a visual reference for all Tailwind CSS color tokens — from slate-50 to rose-950. Browse the full palette, click any color swatch to copy its hex value, HSL value, or Tailwind class name (e.g., bg-blue-500, text-slate-900). Filter by color family, search by hex value, and see the color scale from lightest (50) to darkest (950) in a continuous gradient view.
Tailwind CSS uses a color system with semantic names (slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose) paired with numeric scales (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950). The scale is perceptually even — each step represents a similar perceived lightness change. The 500 value is approximately the 'pure' hue midpoint, with lower numbers lighter and higher numbers darker.
Tailwind v4 (2025) moved to a CSS variable-based color system — instead of hard-coding hex values in class names, colors are defined as CSS custom properties (--color-blue-500: oklch(0.623 0.214 259.15)). This enables dynamic theming and the oklch color space for more perceptually uniform color manipulation. Tailwind v3 and earlier use hard-coded HSL values.
Find text color for dark background
Result: Dark bg: slate-900 (#0f172a) → readable text: slate-100 (#f1f5f9) → contrast ratio: 16.5:1 ✓
Brand color mapping
Result: Brand blue #2563EB ≈ blue-600 in Tailwind palette
Copy class name
Result: Click blue-500 → copies 'text-blue-500' / 'bg-blue-500' / 'border-blue-500'
What is the difference between slate, gray, zinc, neutral, and stone?
Tailwind includes five near-neutral color families with subtle hue differences: slate (cool blue-gray), gray (pure neutral with slight warmth), zinc (dark, slightly warm gray), neutral (truly neutral, no hue), stone (warm brownish gray). For most UIs, pick one and use it consistently for backgrounds, borders, and text. slate and gray are the most popular. stone and zinc work well for dark/warm design themes.
How do I use Tailwind colors in custom CSS?
Tailwind v3: in tailwind.config.js, access colors via theme.colors. In CSS: use the tailwindcss/colors plugin path. Tailwind v4: use CSS variables directly: var(--color-blue-500). Custom color that references Tailwind: extend in config: colors: { brand: { DEFAULT: '#2563EB', light: '#60A5FA' } }. Use in HTML: bg-brand, text-brand-light. In vanilla CSS: background-color: theme(colors.blue.500) (available in Tailwind CSS plugin contexts).
What is the best text color for readability on Tailwind backgrounds?
Dark backgrounds (800-950): use 100-200 range for primary text, 400-500 for muted text. Light backgrounds (50-100): use 800-900 for primary text, 500-600 for muted text. WCAG AA requires 4.5:1 contrast ratio for normal text (3:1 for large text). Proven Tailwind combos: slate-900 bg + slate-700 text (dark on light), slate-800 bg + slate-100 text (light on dark). Test with a contrast checker — don't rely on visual estimation.
What are the Tailwind CSS color system changes in v4?
Tailwind v4 (2025) introduced: (1) oklch color space instead of HSL — better perceptual uniformity. (2) CSS variable-based colors (--color-blue-500) instead of hard-coded hex values — enables dynamic theming. (3) Removed the need for tailwind.config.js — configuration now uses @theme in CSS. (4) P3 color gamut support — richer colors on modern displays. (5) New color names and adjusted values. Migration from v3 to v4 may require updating custom color values that matched old hex values.
How do I create a dark mode with Tailwind colors?
Tailwind has a built-in dark mode system: add dark class to (darkMode: 'class' in config) or use prefers-color-scheme media query (darkMode: 'media'). Apply dark variant classes: bg-white dark:bg-slate-900, text-slate-900 dark:text-slate-100. For a complete dark theme: set all background, text, border, and input colors with dark: variants. Tailwind v4 simplifies this with @dark selector in CSS and CSS variable themes.