Tailwind CSS yellow color

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

yellow shades

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

yellow-50

yellow-100

yellow-200

yellow-300

yellow-400

yellow-500

yellow-600

yellow-700

yellow-800

yellow-900

yellow-950

Copy the whole palette

Tailwind v4 (CSS, @theme)

@theme {
  --color-yellow-50: oklch(98.7% 0.026 102.212);
  --color-yellow-100: oklch(97.3% 0.071 103.193);
  --color-yellow-200: oklch(94.5% 0.129 101.54);
  --color-yellow-300: oklch(90.5% 0.182 98.111);
  --color-yellow-400: oklch(85.2% 0.199 91.936);
  --color-yellow-500: oklch(79.5% 0.184 86.047);
  --color-yellow-600: oklch(68.1% 0.162 75.834);
  --color-yellow-700: oklch(55.4% 0.135 66.442);
  --color-yellow-800: oklch(47.6% 0.114 61.907);
  --color-yellow-900: oklch(42.1% 0.095 57.708);
  --color-yellow-950: oklch(28.6% 0.066 53.813);
}

Tailwind v3 (tailwind.config.js)

module.exports = {
  theme: {
    extend: {
      colors: {
        yellow: {
          50: '#fefce8',
          100: '#fef9c3',
          200: '#fef08a',
          300: '#fde047',
          400: '#facc15',
          500: '#eab308',
          600: '#ca8a04',
          700: '#a16207',
          800: '#854d0e',
          900: '#713f12',
          950: '#422006'
        }
      }
    }
  }
}

CSS variables (HEX)

:root {
  --yellow-50: #FEFCE8;
  --yellow-100: #FEF9C3;
  --yellow-200: #FEF08A;
  --yellow-300: #FDE047;
  --yellow-400: #FACC15;
  --yellow-500: #EAB308;
  --yellow-600: #CA8A04;
  --yellow-700: #A16207;
  --yellow-800: #854D0E;
  --yellow-900: #713F12;
  --yellow-950: #422006;
}

More Tailwind colors

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

Frequently asked questions

What is the HEX code for Tailwind yellow-500?

In Tailwind v3, yellow-500 is #EAB308, which is rgb(234, 179, 8). In Tailwind v4 it is defined as oklch(79.5% 0.184 86.047).

How do I use Tailwind yellow in my project?

With classes like bg-yellow-500, text-yellow-700 or border-yellow-200. In Tailwind v4 you can also use the CSS variable var(--color-yellow-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.