RecolorOpen Recolor

A vivid light yellow, black text passes AA

Tailwind yellow-400

In Tailwind CSS 4.3.3, yellow-400 is defined as oklch(85.2% 0.199 91.936); as the nearest sRGB hex that is #fcc800, or rgb(252 200 0). Black text on it reaches 13.40:1, passing WCAG AAA, and Recolor (recolor.page) can show it on a real page.

Last updated

#fcc800yellow-400
From the theme file of Tailwind CSS 4.3.3 (--color-yellow-400), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(85.2% 0.199 91.936)
Hex#fcc800, the nearest color in sRGB
RGBrgb(252 200 0)
HSLhsl(48 100% 49%)
OKLCH of the hexoklch(85.4% 0.175 89.6)
CSS variablevar(--color-yellow-400)
Nearest CSS namegold #ffd700, 0.038 away in OKLab
White text1.57:1: AA fails, AAA fails, large text fails
Black text13.40:1: AA passes, AAA passes, large text passes

About yellow-400

In OKLCH, yellow-400 has a lightness of 85.2%, a chroma of 0.199 and a hue of 91.9 degrees, which makes it a vivid light yellow. The step up to yellow-300 is 5.3 points of lightness, and the step down to yellow-500 5.7 points.

Its HSL lightness, 49%, says little about how light yellow-400 looks; OKLCH, made to match the eye, measures 85.2%, 36 points away. Yellow-400 is one of the 95 colors in Tailwind CSS 4.3.3 that sRGB cannot hold. Its hex, #fcc800, gives up 0.024 of chroma and moves 0.2 points of lightness and 2.3 degrees of hue; a Display P3 screen shows the full value.

For text, yellow-400 wants black: 13.40:1 clears even AAA's 7:1, and white at 1.57:1 fails AA. On the yellow scale black text works down to yellow-600, which leaves yellow-400 2 shades of margin.

Among the CSS keywords, gold (#ffd700) comes closest at 0.038 in OKLab, close enough to stand in for it in a sketch.

Tints and shades

  1. #fff7e1
  2. #feeec3
  3. #fee5a3
  4. #fddc81
  5. #fdd258
  6. #fcc800
  7. #c69c00
  8. #927300
  9. #624c00
  10. #352800
  11. #0e0900

From light to dark: 5 toward white and 5 toward black, mixed in OKLCH a sixth of the way at a time with the hue kept. A step that would repeat its neighbor is left out.

A palette around it

  1. #fcc800
  2. #00321d
  3. #8a7fe0
  4. #fff3b6
  5. #006176

Locked as the first of five swatches, yellow-400 gets #00321d, #8a7fe0, #fff3b6, #006176 from Recolor's generator, a free palette, hues spread around the wheel. The seed is its hex, so the palette stays the same. Open it in Recolor.

Using yellow-400

Pair it with text-black, 13.40:1; yellow-400 as text on a black page measures the same ratio. In CSS it is var(--color-yellow-400).

HTML
<a class="bg-yellow-400 text-black" href="/start">Get started</a>
<p class="text-yellow-400">Text in yellow-400</p>

Common questions

Does white text pass WCAG AA on Tailwind yellow-400?

No. White text measures 1.57:1 on yellow-400, under AA's 4.5:1; black text measures 13.40:1 and passes. The lightest yellow shade for white text is yellow-700.

Is Tailwind yellow-400 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-yellow-400: oklch(85.2% 0.199 91.936); #fcc800 is its nearest sRGB color, since the value lies outside sRGB.

Is there a CSS named color for Tailwind yellow-400?

No. The nearest CSS named color is gold (#ffd700), 0.038 away in OKLab.

Sources