RecolorOpen Recolor

A pale yellow, black text passes AA

Tailwind amber-100

Tailwind amber-100 is oklch(96.2% 0.059 95.617) in Tailwind CSS 4.3.3, which is #fef3c6 in hex and rgb(254 243 198). Black text on it reaches 18.85:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#fef3c6amber-100
From the theme file of Tailwind CSS 4.3.3 (--color-amber-100), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(96.2% 0.059 95.617)
Hex#fef3c6
RGBrgb(254 243 198)
HSLhsl(48 97% 89%)
CSS variablevar(--color-amber-100)
Nearest CSS namelemonchiffon #fffacd, 0.017 away in OKLab
White text1.11:1: AA fails, AAA fails, large text fails
Black text18.85:1: AA passes, AAA passes, large text passes

About amber-100

Tailwind amber-100 is a pale yellow: OKLCH lightness 96.2%, chroma 0.059, hue 95.6 degrees. On Tailwind's amber scale it sits between amber-50 at 98.7% and amber-200 at 92.4%.

Its lightness is 89% in HSL and 96.2% in OKLCH, 8 points apart; only the second tracks how light it looks. Its value fits inside sRGB, so #fef3c6 is the same color, not an approximation.

Black text on amber-100 measures 18.85:1, past the 7:1 of WCAG AAA, while white text manages only 1.11:1. On the amber scale black text works down to amber-600, which leaves amber-100 5 shades of margin.

The CSS keyword lemonchiffon (#fffacd) is almost the same color: 0.017 apart in OKLab, under the step most people notice.

Tints and shades

  1. #fffdf6
  2. #fffbec
  3. #fef9e3
  4. #fef7d9
  5. #fef5d0
  6. #fef3c6
  7. #c7bf9b
  8. #938d72
  9. #635e4b
  10. #363328
  11. #0f0d09

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. #fef3c6
  2. #475284
  3. #8ac494
  4. #31161a
  5. #4e8cb2

Recolor's generator, with amber-100 locked as swatch 1 and the seed taken from its hex, drew a free palette, hues spread around the wheel: #475284, #8ac494, #31161a, #4e8cb2. Open it in Recolor.

Using amber-100

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

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

Common questions

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

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

Is Tailwind amber-100 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-amber-100: oklch(96.2% 0.059 95.617); #fef3c6 is its conversion to sRGB.

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

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

Sources