RecolorOpen Recolor

A yellowish white, black text passes AA

Tailwind yellow-50

Tailwind yellow-50 is oklch(98.7% 0.026 102.212) in Tailwind CSS 4.3.3, which is #fefce8 in hex and rgb(254 252 232). Black text on it reaches 20.30:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#fefce8yellow-50
From the theme file of Tailwind CSS 4.3.3 (--color-yellow-50), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(98.7% 0.026 102.212)
Hex#fefce8
RGBrgb(254 252 232)
HSLhsl(55 92% 95%)
CSS variablevar(--color-yellow-50)
Nearest CSS nameivory #fffff0, 0.011 away in OKLab
White text1.03:1: AA fails, AAA fails, large text fails
Black text20.30:1: AA passes, AAA passes, large text passes

About yellow-50

Tailwind yellow-50 is a yellowish white: OKLCH lightness 98.7%, chroma 0.026, hue 102.2 degrees. As the first of the eleven yellow shades it sits closest to white, 1.3 points below it and 1.4 points above yellow-100.

Here HSL's lightness, 95%, lands near OKLCH's 98.7%, which is not true of every color. Its value fits inside sRGB, so #fefce8 is the same color, not an approximation.

Black text on yellow-50 measures 20.30:1, past the 7:1 of WCAG AAA, while white text manages only 1.03:1. On the yellow scale black text works down to yellow-600, which leaves yellow-50 6 shades of margin.

The CSS keyword ivory (#fffff0) is almost the same color: 0.011 apart in OKLab, under the step most people notice.

Tints and shades

  1. #fffffb
  2. #fffef7
  3. #fefef4
  4. #fefdf0
  5. #fefdec
  6. #fefce8
  7. #c7c6b6
  8. #939286
  9. #636259
  10. #363530
  11. #0f0e0c

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. #fefce8
  2. #3c562f
  3. #bcd1b2
  4. #1b2310
  5. #9c6bbd

Recolor's generator, with yellow-50 locked as swatch 1 and the seed taken from its hex, drew a complementary palette, built on the hue opposite: #3c562f, #bcd1b2, #1b2310, #9c6bbd. Open it in Recolor.

Using yellow-50

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

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

Common questions

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

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

Is Tailwind yellow-50 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-yellow-50: oklch(98.7% 0.026 102.212); #fefce8 is its conversion to sRGB.

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

Yes, nearly: ivory (#fffff0) is 0.011 away in OKLab, too close to tell apart by eye.

Sources