Tailwind Yellow: 11 Shades, Contrast & Codes

Tailwind CSS 4.3.3

yellow: current colors

11 shades with exact official OKLCH values. Use bg-yellow-500, text-yellow-500 or border-yellow-500 in Tailwind. Wide-gamut colors are preserved; these are not the v3 hex values.

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

Source: Tailwind CSS 4.3.3 theme.css (MIT). Values are pinned to this release. Older v3 reference values below are kept separately for existing projects.

Scale

Every shade, 50 to 950

Each shade has a page of its own. Under each, white and black text on it; a bold figure passes 4.5:1.

50#FEFCE8
White
1.03
Black
20.30
100#FEF9C3
White
1.07
Black
19.55
200#FEF08A
White
1.16
Black
18.04
300#FDE047
White
1.31
Black
15.92
400#FACC15
White
1.53
Black
13.71
500#EAB308
White
1.91
Black
10.95
600#CA8A04
White
2.93
Black
7.14
700#A16207
White
4.92
Black
4.26
800#854D0E
White
6.85
Black
3.06
900#713F12
White
8.67
Black
2.42
950#422006
White
14.57
Black
1.44

Values

Hex, RGB and OKLCH values

The Tailwind CSS v3.4 values, with the contrast of white and black text on each shade.

Shade	HEX	RGB	OKLCH	White text	Black text
yellow-50	`#FEFCE8`	`rgb(254, 252, 232)`	`oklch(0.987 0.026 102.2)`	1.03	20.30
yellow-100	`#FEF9C3`	`rgb(254, 249, 195)`	`oklch(0.973 0.069 103.2)`	1.07	19.55
yellow-200	`#FEF08A`	`rgb(254, 240, 138)`	`oklch(0.945 0.124 101.5)`	1.16	18.04
yellow-300	`#FDE047`	`rgb(253, 224, 71)`	`oklch(0.905 0.166 98.1)`	1.31	15.92
yellow-400	`#FACC15`	`rgb(250, 204, 21)`	`oklch(0.861 0.173 91.9)`	1.53	13.71
yellow-500	`#EAB308`	`rgb(234, 179, 8)`	`oklch(0.795 0.162 86.0)`	1.91	10.95
yellow-600	`#CA8A04`	`rgb(202, 138, 4)`	`oklch(0.681 0.142 75.8)`	2.93	7.14
yellow-700	`#A16207`	`rgb(161, 98, 7)`	`oklch(0.554 0.121 66.4)`	4.92	4.26
yellow-800	`#854D0E`	`rgb(133, 77, 14)`	`oklch(0.476 0.103 61.9)`	6.85	3.06
yellow-900	`#713F12`	`rgb(113, 63, 18)`	`oklch(0.421 0.090 57.7)`	8.67	2.42
yellow-950	`#422006`	`rgb(66, 32, 6)`	`oklch(0.286 0.064 53.8)`	14.57	1.44

Legibility

Which shades pass on each other

Every shade as text on every other shade. 38 of 110 pairings pass 4.5:1 for body text, and 10 more pass 3:1 for large text.

Text shade, then background shade	50	100	200	300	400	500	600	700	800	900	950
50	same shade	1.03	1.12	1.27	1.48	1.85	2.84	4.75	6.62	8.38	14.09
100	1.03	same shade	1.08	1.22	1.42	1.78	2.73	4.58	6.37	8.07	13.56
200	1.12	1.08	same shade	1.13	1.31	1.64	2.52	4.23	5.88	7.45	12.52
300	1.27	1.22	1.13	same shade	1.16	1.45	2.22	3.73	5.19	6.57	11.05
400	1.48	1.42	1.31	1.16	same shade	1.25	1.91	3.21	4.47	5.66	9.51
500	1.85	1.78	1.64	1.45	1.25	same shade	1.53	2.56	3.57	4.52	7.59
600	2.84	2.73	2.52	2.22	1.91	1.53	same shade	1.67	2.33	2.95	4.96
700	4.75	4.58	4.23	3.73	3.21	2.56	1.67	same shade	1.39	1.76	2.96
800	6.62	6.37	5.88	5.19	4.47	3.57	2.33	1.39	same shade	1.26	2.12
900	8.38	8.07	7.45	6.57	5.66	4.52	2.95	1.76	1.26	same shade	1.68
950	14.09	13.56	12.52	11.05	9.51	7.59	4.96	2.96	2.12	1.68	same shade

Rows are the text shade, columns the background. A bold figure on a tinted cell passes 4.5:1 for body text; a plain one passes 3:1 for large text only; a faint one fails.

Color vision

The scale with color blindness

The same eleven shades as seen with each color vision deficiency. Lightness keeps a ramp in order even where its hue collapses.

Simulated with Machado et al. (2009) at full severity, in linear light.

What each type sees

Typical vision

Closest neighbors: 300 and 400, ΔE2000 5.9
Protanopia

Closest neighbors: 300 and 400, ΔE2000 4.2
Deuteranopia

Closest neighbors: 300 and 400, ΔE2000 3.6
Tritanopia

Closest neighbors: 50 and 100, ΔE2000 3.5
Achromatopsia

Closest neighbors: 50 and 100, ΔE2000 0.8

Code

Design tokens

The whole family in six formats, ready to paste.

CSS custom properties

:root {
  --color-yellow-50: #fefce8;
  --color-yellow-100: #fef9c3;
  --color-yellow-200: #fef08a;
  --color-yellow-300: #fde047;
  --color-yellow-400: #facc15;
  --color-yellow-500: #eab308;
  --color-yellow-600: #ca8a04;
  --color-yellow-700: #a16207;
  --color-yellow-800: #854d0e;
  --color-yellow-900: #713f12;
  --color-yellow-950: #422006;
}

Tailwind config

// tailwind.config.js — yellow is built in; this pins the v3.4 values.
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',
        },
      },
    },
  },
};

Tailwind v4 theme

/* app.css — Tailwind CSS v4 */
@import "tailwindcss";

@theme {
  /* v4 has its own yellow; these pin the v3 values. */
  --color-yellow-50: oklch(0.987 0.026 102.2);
  --color-yellow-100: oklch(0.973 0.069 103.2);
  --color-yellow-200: oklch(0.945 0.124 101.5);
  --color-yellow-300: oklch(0.905 0.166 98.1);
  --color-yellow-400: oklch(0.861 0.173 91.9);
  --color-yellow-500: oklch(0.795 0.162 86.0);
  --color-yellow-600: oklch(0.681 0.142 75.8);
  --color-yellow-700: oklch(0.554 0.121 66.4);
  --color-yellow-800: oklch(0.476 0.103 61.9);
  --color-yellow-900: oklch(0.421 0.090 57.7);
  --color-yellow-950: oklch(0.286 0.064 53.8);
}

Design tokens (W3C DTCG)

{
  "color": {
    "yellow": {
      "50": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.9961, 0.9882, 0.9098],
          "hex": "#fefce8"
        }
      },
      "100": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.9961, 0.9765, 0.7647],
          "hex": "#fef9c3"
        }
      },
      "200": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.9961, 0.9412, 0.5412],
          "hex": "#fef08a"
        }
      },
      "300": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.9922, 0.8784, 0.2784],
          "hex": "#fde047"
        }
      },
      "400": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.9804, 0.8, 0.0824],
          "hex": "#facc15"
        }
      },
      "500": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.9176, 0.702, 0.0314],
          "hex": "#eab308"
        }
      },
      "600": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.7922, 0.5412, 0.0157],
          "hex": "#ca8a04"
        }
      },
      "700": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.6314, 0.3843, 0.0275],
          "hex": "#a16207"
        }
      },
      "800": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.5216, 0.302, 0.0549],
          "hex": "#854d0e"
        }
      },
      "900": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.4431, 0.2471, 0.0706],
          "hex": "#713f12"
        }
      },
      "950": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.2588, 0.1255, 0.0235],
          "hex": "#422006"
        }
      }
    }
  }
}

SwiftUI colors

import SwiftUI

enum Palette {
    static let yellow50 = Color(.sRGB, red: 0.996, green: 0.988, blue: 0.910, opacity: 1)
    static let yellow100 = Color(.sRGB, red: 0.996, green: 0.976, blue: 0.765, opacity: 1)
    static let yellow200 = Color(.sRGB, red: 0.996, green: 0.941, blue: 0.541, opacity: 1)
    static let yellow300 = Color(.sRGB, red: 0.992, green: 0.878, blue: 0.278, opacity: 1)
    static let yellow400 = Color(.sRGB, red: 0.980, green: 0.800, blue: 0.082, opacity: 1)
    static let yellow500 = Color(.sRGB, red: 0.918, green: 0.702, blue: 0.031, opacity: 1)
    static let yellow600 = Color(.sRGB, red: 0.792, green: 0.541, blue: 0.016, opacity: 1)
    static let yellow700 = Color(.sRGB, red: 0.631, green: 0.384, blue: 0.027, opacity: 1)
    static let yellow800 = Color(.sRGB, red: 0.522, green: 0.302, blue: 0.055, opacity: 1)
    static let yellow900 = Color(.sRGB, red: 0.443, green: 0.247, blue: 0.071, opacity: 1)
    static let yellow950 = Color(.sRGB, red: 0.259, green: 0.125, blue: 0.024, opacity: 1)
}

Jetpack Compose colors

import androidx.compose.ui.graphics.Color

object Palette {
    val Yellow50 = Color(0xFFFEFCE8)
    val Yellow100 = Color(0xFFFEF9C3)
    val Yellow200 = Color(0xFFFEF08A)
    val Yellow300 = Color(0xFFFDE047)
    val Yellow400 = Color(0xFFFACC15)
    val Yellow500 = Color(0xFFEAB308)
    val Yellow600 = Color(0xFFCA8A04)
    val Yellow700 = Color(0xFFA16207)
    val Yellow800 = Color(0xFF854D0E)
    val Yellow900 = Color(0xFF713F12)
    val Yellow950 = Color(0xFF422006)
}

Families

Other Tailwind families

The rest of the Tailwind CSS v3.4 palette, in the order Tailwind lists it.

Tailwind yellow 11 shades, 50 to 950