RecolorOpen Recolor

A bright yellow, black text passes AA

Tailwind yellow-200

The hex code of Tailwind yellow-200 is #fff085 (rgb(255 240 133)), from its Tailwind CSS 4.3.3 value oklch(94.5% 0.129 101.54). Black text on it reaches 18.05:1, passing WCAG AAA; below, Recolor (recolor.page) puts it on a page.

Last updated

#fff085yellow-200
From the theme file of Tailwind CSS 4.3.3 (--color-yellow-200), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(94.5% 0.129 101.54)
Hex#fff085
RGBrgb(255 240 133)
HSLhsl(53 100% 76%)
CSS variablevar(--color-yellow-200)
Nearest CSS namekhaki #f0e68c, 0.036 away in OKLab
White text1.16:1: AA fails, AAA fails, large text fails
Black text18.05:1: AA passes, AAA passes, large text passes

About yellow-200

Read as numbers, yellow-200 is lightness 94.5%, chroma 0.129 and hue 101.5 degrees; read by eye, it is a bright yellow. Its neighbors on the yellow scale are yellow-100, 2.8 points lighter, and yellow-300, 4.0 points darker.

Its HSL lightness, 76%, says little about how light yellow-200 looks; OKLCH, made to match the eye, measures 94.5%, 18 points away. No gamut mapping is needed here: oklch(94.5% 0.129 101.54) sits inside sRGB and #fff085 matches it.

Black on yellow-200 reads at 18.05:1, enough for AAA body text; white reaches 1.16:1 and should stay off it. On the yellow scale black text works down to yellow-600, which leaves yellow-200 4 shades of margin.

Of the named colors, khaki (#f0e68c) is the nearest, 0.036 away in OKLab; next to each other the two still differ.

Tints and shades

  1. #fffded
  2. #fffbda
  3. #fff8c6
  4. #fff6b2
  5. #fff39c
  6. #fff085
  7. #c8bc67
  8. #948b4b
  9. #635d30
  10. #363217
  11. #0f0d04

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. #fff085
  2. #8d8142
  3. #1d1906
  4. #cf9efe
  5. #446282

Around yellow-200 as swatch 1, Recolor's generator made a split-complementary palette, built on the two hues beside its opposite: #8d8142, #1d1906, #cf9efe, #446282, drawn from a seed fixed by its hex. Open it in Recolor.

Using yellow-200

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

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

Common questions

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

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

Is Tailwind yellow-200 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-yellow-200: oklch(94.5% 0.129 101.54); #fff085 is its conversion to sRGB.

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

No. The nearest CSS named color is khaki (#f0e68c), 0.036 away in OKLab.

Sources