Tailwind Palette

Tailwind CSS Color Palette: Complete Reference for Every Swatch

Tailwind CSS ships with 22 color families, each spanning 11 shades from 50 (near-white) to 950 (near-black) — a total of 242 colors. Memorising them is neither realistic nor useful; having instant access to the full palette, with the ability to copy in any format, is. The Tailwind Palette developer utility puts all 242 swatches on one screen and gets out of your way.

The Architecture of the Tailwind Color System

Tailwind's default color palette is built on a perceptual lightness scale. Each shade number (50–950) roughly corresponds to a lightness level in the HSL color model, with some calibration to ensure visual balance across hue families. This is why slate-500 and blue-500 have similar perceived brightness even though their hues differ dramatically.

The scale has two important endpoints added in Tailwind v3:

• Shade 50 — very light, near-white. Useful for page backgrounds and hover states on white surfaces.
• Shade 950 — near-black with hue. Introduced in Tailwind v3.3 to provide a darker option than 900, essential for dark mode foreground text and deeply saturated dark backgrounds.

Color Families and Their Intended Uses

Neutral families (slate, gray, zinc, neutral, stone) form the backbone of most UIs. They differ in their undertone:

• slate — cool blue-grey. Ideal for technical/developer products.
• gray — neutral warm grey. General-purpose text and border color.
• zinc — slightly warm grey with a metallic quality. Popular in dark mode UIs.
• neutral — completely neutral, no hue bias. Best for pure achromatic designs.
• stone — warm brown-grey. Good for editorial and lifestyle products.

Chromatic families — red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose — provide accent, semantic, and brand colors. In a typical design system:

• red/rose → error states, destructive actions
• amber/yellow → warning states, highlights
• green/emerald → success states, positive indicators
• blue/indigo → primary actions, links
• sky/cyan → informational states, secondary actions

How to Use the Palette Tool

Search filter — Type any family name (e.g., "teal", "rose") to filter the palette grid instantly. The filter is case-insensitive and matches partial names.

Format toggle — Three copy formats:

• HEX — #0ea5e9 — for CSS variables, Figma colour styles, and tailwind.config.js extensions.
• CLASS — sky-500 — for direct use in utility classes (text-sky-500, bg-sky-500, border-sky-500).
• RGB — rgb(14, 165, 233) — for JavaScript color manipulation, canvas APIs, and CSS rgb() functions.

Click any swatch to copy. The swatch briefly flashes a checkmark to confirm. The value format matches whichever mode is active in the format toggle.

Reading the Swatch Grid

Each row is a color family. Each column is a shade (50 through 950). Lighter shades are on the left; darker shades are on the right. The swatch background is the actual hex value — what you see is what you copy. Text contrast on each swatch is calculated using the WCAG relative luminance formula, ensuring the label is always legible:

L = 0.299·R + 0.587·G + 0.114·B
isLight = L / 255 > 0.55
textColor = isLight ? '#000000bb' : '#ffffffbb'

This is a simplified but effective approximation of the full WCAG formula. It ensures black labels on light swatches and white labels on dark swatches at all times.

Tailwind v3 Palette in tailwind.config.js

The full palette is available by default in Tailwind v3. You can extend or override individual colors in your config:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50:  '#ecfeff',
          500: '#00e5ff',
          900: '#083344',
        },
      },
    },
  },
};

You can also import the default palette directly to reference individual hex values in JavaScript contexts:

import colors from 'tailwindcss/colors';

const chartPrimary = colors.blue[500];   // '#3b82f6'
const chartSecondary = colors.purple[500]; // '#a855f7'

This is useful in charting libraries (Chart.js, Recharts, D3) and Canvas APIs where Tailwind class names cannot be applied.

Tailwind v4 Color Changes

Tailwind CSS v4 introduces a new color system based on OKLCH rather than HSL/hex. OKLCH provides more perceptually uniform lightness steps and wider gamut support (P3 colors on capable displays). The existing Tailwind v3 hex values remain valid as a reference and as fallbacks, but the v4 palette adds new shades and adjusts some existing ones for better perceptual linearity.

The hex values in this tool represent the Tailwind v3 stable palette — the reference used by the majority of existing projects. For Tailwind v4 projects, verify color values against the v4 documentation if perceptual accuracy is critical.

Accessibility: Color Contrast and Tailwind

WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. As a rule of thumb with the Tailwind palette:

• Text on white (#ffffff): use shade 600 or darker for most families.
• Text on gray-950 or slate-950: use shade 300 or lighter for most families.
• Interactive elements (buttons): use shade 500–600 as background, white text for the common case.

Specific pairs to know:

• bg-blue-600 + text-white → 5.1:1 ✓
• bg-yellow-400 + text-black → 13.6:1 ✓
• bg-yellow-400 + text-white → 1.8:1 ✗ (common mistake)
• bg-red-500 + text-white → 4.2:1 (barely fails at normal size)

Use a dedicated contrast checker for final accessibility validation. The palette tool is optimised for exploration and copying, not contrast calculation.

CSS Custom Properties + Tailwind: The Best of Both Worlds

A common pattern is to map Tailwind palette values to CSS custom properties for dynamic theming:

:root {
  --color-primary: theme(colors.blue.600);
  --color-primary-light: theme(colors.blue.50);
  --color-primary-dark: theme(colors.blue.800);
}

html[data-theme="dark"] {
  --color-primary: theme(colors.sky.400);
  --color-primary-light: theme(colors.sky.950);
  --color-primary-dark: theme(colors.sky.200);
}

This gives you Tailwind's curated hex values as the source of truth while enabling runtime theme switching via the data-theme attribute — no JavaScript color logic, no hardcoded hex strings in component files.

Why a Dedicated Palette Tool?

The Tailwind documentation displays the palette but does not provide copy-on-click. Browser DevTools show computed colors but require inspecting live elements. The Figma Tailwind plugin requires a Figma session. This online developer utility is the fastest way to go from "I need a medium blue" to the exact class name or hex value, with zero context switching.