Tailwind CSS indigo color

The 11 shades of Tailwind CSS indigo, from indigo-50 (lightest) to indigo-950 (darkest). Click any value to copy it.

indigo shades

HEX and RGB from Tailwind v3; OKLCH from Tailwind v4. Click a value to copy it.

indigo-50

indigo-100

indigo-200

indigo-300

indigo-400

indigo-500

indigo-600

indigo-700

indigo-800

indigo-900

indigo-950

Copy the whole palette

Tailwind v4 (CSS, @theme)

@theme {
  --color-indigo-50: oklch(96.2% 0.018 272.314);
  --color-indigo-100: oklch(93% 0.034 272.788);
  --color-indigo-200: oklch(87% 0.065 274.039);
  --color-indigo-300: oklch(78.5% 0.115 274.713);
  --color-indigo-400: oklch(67.3% 0.182 276.935);
  --color-indigo-500: oklch(58.5% 0.233 277.117);
  --color-indigo-600: oklch(51.1% 0.262 276.966);
  --color-indigo-700: oklch(45.7% 0.24 277.023);
  --color-indigo-800: oklch(39.8% 0.195 277.366);
  --color-indigo-900: oklch(35.9% 0.144 278.697);
  --color-indigo-950: oklch(25.7% 0.09 281.288);
}

Tailwind v3 (tailwind.config.js)

module.exports = {
  theme: {
    extend: {
      colors: {
        indigo: {
          50: '#eef2ff',
          100: '#e0e7ff',
          200: '#c7d2fe',
          300: '#a5b4fc',
          400: '#818cf8',
          500: '#6366f1',
          600: '#4f46e5',
          700: '#4338ca',
          800: '#3730a3',
          900: '#312e81',
          950: '#1e1b4b'
        }
      }
    }
  }
}

CSS variables (HEX)

:root {
  --indigo-50: #EEF2FF;
  --indigo-100: #E0E7FF;
  --indigo-200: #C7D2FE;
  --indigo-300: #A5B4FC;
  --indigo-400: #818CF8;
  --indigo-500: #6366F1;
  --indigo-600: #4F46E5;
  --indigo-700: #4338CA;
  --indigo-800: #3730A3;
  --indigo-900: #312E81;
  --indigo-950: #1E1B4B;
}

More Tailwind colors

slate gray zinc neutral stone red orange amber yellow lime green emerald teal cyan sky blue violet purple fuchsia pink rose

Frequently asked questions

What is the HEX code for Tailwind indigo-500?

In Tailwind v3, indigo-500 is #6366F1, which is rgb(99, 102, 241). In Tailwind v4 it is defined as oklch(58.5% 0.233 277.117).

How do I use Tailwind indigo in my project?

With classes like bg-indigo-500, text-indigo-700 or border-indigo-200. In Tailwind v4 you can also use the CSS variable var(--color-indigo-500) in your own CSS.

Other frameworks

Tailwind CSS, Material Design and Bootstrap are trademarks of their respective owners. The values come from their public documentation and packages: Tailwind CSS 4.3.3 / 3.4.19, material-colors, Material Web (tokens), Bootstrap 5.3.8 / 4.6.2.