RecolorOpen Recolor

A pale yellow, black text passes AA

Tailwind yellow-100

In Tailwind CSS 4.3.3, yellow-100 is defined as oklch(97.3% 0.071 103.193); in hex that is #fef9c2, or rgb(254 249 194). Black text on it reaches 19.54:1, passing WCAG AAA, and Recolor (recolor.page) can show it on a real page.

Last updated

#fef9c2yellow-100
From the theme file of Tailwind CSS 4.3.3 (--color-yellow-100), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(97.3% 0.071 103.193)
Hex#fef9c2
RGBrgb(254 249 194)
HSLhsl(55 97% 88%)
CSS variablevar(--color-yellow-100)
Nearest CSS namelemonchiffon #fffacd, 0.013 away in OKLab
White text1.07:1: AA fails, AAA fails, large text fails
Black text19.54:1: AA passes, AAA passes, large text passes

About yellow-100

In OKLCH, yellow-100 has a lightness of 97.3%, a chroma of 0.071 and a hue of 103.2 degrees, which makes it a pale yellow. The step up to yellow-50 is 1.4 points of lightness, and the step down to yellow-200 2.8 points.

HSL calls its lightness 88%, OKLCH 97.3%: 9 points between a formula and a measure of what the eye sees. The value lies inside sRGB, the gamut of a hex code, so yellow-100 converts to #fef9c2 without losing chroma.

For text, yellow-100 wants black: 19.54:1 clears even AAA's 7:1, and white at 1.07:1 fails AA. Black text passes on every yellow shade from yellow-50 to yellow-600, 5 shades darker than yellow-100.

Its nearest CSS named color, lemonchiffon (#fffacd), is 0.013 away in OKLab, too close to tell apart by eye.

Tints and shades

  1. #fffef5
  2. #fffdeb
  3. #fefce1
  4. #fefbd7
  5. #fefacd
  6. #fef9c2
  7. #c7c398
  8. #93906f
  9. #636149
  10. #363527
  11. #0f0e08

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. #fef9c2
  2. #7290b9
  3. #262614
  4. #bab998
  5. #3d5b77

Locked as the first of five swatches, yellow-100 gets #7290b9, #262614, #bab998, #3d5b77 from Recolor's generator, a split-complementary palette, built on the two hues beside its opposite. The seed is its hex, so the palette stays the same. Open it in Recolor.

Using yellow-100

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

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

Common questions

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

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

Is Tailwind yellow-100 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-yellow-100: oklch(97.3% 0.071 103.193); #fef9c2 is its conversion to sRGB.

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

Yes, nearly: lemonchiffon (#fffacd) is 0.013 away in OKLab, too close to tell apart by eye.

Sources