RecolorOpen Recolor

A bright yellow, black text passes AA

Tailwind amber-200

In Tailwind CSS 4.3.3, amber-200 is defined as oklch(92.4% 0.12 95.746); in hex that is #fee685, or rgb(254 230 133). Black text on it reaches 16.87:1, passing WCAG AAA, and Recolor (recolor.page) can show it on a real page.

Last updated

#fee685amber-200
From the theme file of Tailwind CSS 4.3.3 (--color-amber-200), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(92.4% 0.12 95.746)
Hex#fee685
RGBrgb(254 230 133)
HSLhsl(48 98% 76%)
CSS variablevar(--color-amber-200)
Nearest CSS namekhaki #f0e68c, 0.020 away in OKLab
White text1.24:1: AA fails, AAA fails, large text fails
Black text16.87:1: AA passes, AAA passes, large text passes

About amber-200

In OKLCH, amber-200 has a lightness of 92.4%, a chroma of 0.120 and a hue of 95.7 degrees, which makes it a bright yellow. The step up to amber-100 is 3.8 points of lightness, and the step down to amber-300 4.5 points.

HSL puts its lightness at 76% and OKLCH at 92.4%, 17 points apart: HSL's lightness does not follow what the eye sees, OKLCH's is built to. The value lies inside sRGB, the gamut of a hex code, so amber-200 converts to #fee685 without losing chroma.

For text, amber-200 wants black: 16.87:1 clears even AAA's 7:1, and white at 1.24:1 fails AA. Black text passes on every amber shade from amber-50 to amber-600, 4 shades darker than amber-200.

Its nearest CSS named color, khaki (#f0e68c), is 0.020 away in OKLab, too close to tell apart by eye.

Tints and shades

  1. #fffbec
  2. #fff7d9
  3. #fef3c5
  4. #feefb1
  5. #feeb9c
  6. #fee685
  7. #c7b467
  8. #93854b
  9. #635930
  10. #363017
  11. #0f0c04

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. #fee685
  2. #4b538d
  3. #e2ca73
  4. #1b1c28
  5. #928253

Locked as the first of five swatches, amber-200 gets #4b538d, #e2ca73, #1b1c28, #928253 from Recolor's generator, a complementary palette, built on the hue opposite. The seed is its hex, so the palette stays the same. Open it in Recolor.

Using amber-200

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

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

Common questions

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

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

Is Tailwind amber-200 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-amber-200: oklch(92.4% 0.12 95.746); #fee685 is its conversion to sRGB.

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

Yes, nearly: khaki (#f0e68c) is 0.020 away in OKLab, too close to tell apart by eye.

Sources