What colors does Tailwind CSS include by default?

Tailwind ships 17 chromatic families (red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink and rose) plus neutral families such as slate, gray, zinc, neutral and stone, each with 11 shades from 50 to 950.

Why are Tailwind v4 colors in OKLCH?

Tailwind v4 defines its palette with oklch() so shades are perceptually even and can use the wider Display-P3 gamut on modern screens. Browsers without wide-gamut displays clamp them to the nearest sRGB color automatically.

What are the Tailwind colors in HEX?

Switch the format above to HEX to see every shade as a HEX code, then click any cell to copy it. These are the v4 OKLCH values converted to sRGB, so a few vivid shades differ slightly from the hand-picked HEX values in Tailwind v3.

How do I add a custom color to Tailwind?

In Tailwind v4, declare it in CSS: @theme { --color-brand-500: oklch(0.62 0.19 260); } and the classes bg-brand-500, text-brand-500 and so on become available. In v3, add it under theme.extend.colors in tailwind.config.js. The color scale generator creates a full 50–950 ramp in both formats.

Tailwind CSS Colors

The complete Tailwind color palette, every family from 50 to 950. Click any shade to copy its class name, OKLCH value or HEX code.

Copy format

Click a shade to copy

	50	100	200	300	400	500	600	700	800	900	950

Export blue

Click a family name in the table to switch. Open the blue-500 color page for harmonies and contrast details.

Tailwind v4 (@theme)

@theme {
  --color-blue-50: oklch(97% 0.014 254.604);
  --color-blue-100: oklch(93.2% 0.032 255.585);
  --color-blue-200: oklch(88.2% 0.059 254.128);
  --color-blue-300: oklch(80.9% 0.105 251.813);
  --color-blue-400: oklch(70.7% 0.165 254.624);
  --color-blue-500: oklch(62.3% 0.214 259.815);
  --color-blue-600: oklch(54.6% 0.245 262.881);
  --color-blue-700: oklch(48.8% 0.243 264.376);
  --color-blue-800: oklch(42.4% 0.199 265.638);
  --color-blue-900: oklch(37.9% 0.146 265.522);
  --color-blue-950: oklch(28.2% 0.091 267.935);
}

Tailwind v3 config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        blue: {
          50: "#eff6ff",
          100: "#dbeafe",
          200: "#bedbff",
          300: "#8ec5ff",
          400: "#51a2ff",
          500: "#2b7fff",
          600: "#155dfc",
          700: "#1447e6",
          800: "#193cb8",
          900: "#1c398e",
          950: "#162456",
        },
      },
    },
  },
};

CSS variables (HEX)

:root {
  --blue-50: #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bedbff;
  --blue-300: #8ec5ff;
  --blue-400: #51a2ff;
  --blue-500: #2b7fff;
  --blue-600: #155dfc;
  --blue-700: #1447e6;
  --blue-800: #193cb8;
  --blue-900: #1c398e;
  --blue-950: #162456;
}

How Tailwind’s palette is organised

Each family has 11 shades. 50–200 are tints for backgrounds and subtle fills, 300–400 suit borders and disabled states, 500–600 are the “true” brand-strength colors, and 700–950 are for text, hover states and dark-mode surfaces. Text in a 700 shade or darker passes WCAG AA (4.5:1) on a white background in every family.

Tailwind v4 vs v3 colors

Tailwind v4 moved the default palette to oklch() and slightly increased saturation for displays that support Display-P3. The class names are unchanged, so bg-blue-500 still works; only the underlying values moved. Recent v4 releases also added the mauve, olive, mist and taupe neutrals. The HEX column here is the v4 color converted to sRGB.

Making your own Tailwind colors

For a brand color that isn’t in the palette, the color scale generator builds a matching 50–950 ramp in OKLCH, and the design system generator adds neutral, success, warning and danger ramps with light and dark tokens ready for Tailwind.

Frequently asked questions

What colors does Tailwind CSS include by default?: Tailwind ships 17 chromatic families (red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink and rose) plus neutral families such as slate, gray, zinc, neutral and stone, each with 11 shades from 50 to 950.
Why are Tailwind v4 colors in OKLCH?: Tailwind v4 defines its palette with oklch() so shades are perceptually even and can use the wider Display-P3 gamut on modern screens. Browsers without wide-gamut displays clamp them to the nearest sRGB color automatically.
What are the Tailwind colors in HEX?: Switch the format above to HEX to see every shade as a HEX code, then click any cell to copy it. These are the v4 OKLCH values converted to sRGB, so a few vivid shades differ slightly from the hand-picked HEX values in Tailwind v3.
How do I add a custom color to Tailwind?: In Tailwind v4, declare it in CSS: @theme { --color-brand-500: oklch(0.62 0.19 260); } and the classes bg-brand-500, text-brand-500 and so on become available. In v3, add it under theme.extend.colors in tailwind.config.js. The color scale generator creates a full 50–950 ramp in both formats.

Related tools

▤Color Scale Generator

Turn one color into a 50–950 ramp, export as CSS variables, JSON or Tailwind theme.

◈Design System From One Color

Primary, neutral, success, warning, danger ramps plus semantic light/dark tokens.

✎Color Namer

Name any color: descriptive name, closest CSS keyword and closest Tailwind shade.