RecolorOpen Recolor

A yellowish white, black text passes AA

Tailwind amber-50

The hex code of Tailwind amber-50 is #fffbeb (rgb(255 251 235)), from its Tailwind CSS 4.3.3 value oklch(98.7% 0.022 95.277). Black text on it reaches 20.25:1, passing WCAG AAA; below, Recolor (recolor.page) puts it on a page.

Last updated

#fffbebamber-50
From the theme file of Tailwind CSS 4.3.3 (--color-amber-50), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(98.7% 0.022 95.277)
Hex#fffbeb, the nearest color in sRGB
RGBrgb(255 251 235)
HSLhsl(48 100% 96%)
OKLCH of the hexoklch(98.7% 0.021 95.3)
CSS variablevar(--color-amber-50)
Nearest CSS namefloralwhite #fffaf0, 0.008 away in OKLab
White text1.04:1: AA fails, AAA fails, large text fails
Black text20.25:1: AA passes, AAA passes, large text passes

About amber-50

Read as numbers, amber-50 is lightness 98.7%, chroma 0.022 and hue 95.3 degrees; read by eye, it is a yellowish white. It opens the amber scale as its lightest shade, 2.5 points of lightness above amber-100.

HSL and OKLCH agree on how light it is, 96% and 98.7%. A hex code cannot hold amber-50 exactly: the value is outside sRGB, and #fffbeb is the CSS Color 4 gamut mapping of it, chroma lowered by 0.001, 0.0 points of lightness and 0.0 degrees of hue away from the value.

Black on amber-50 reads at 20.25:1, enough for AAA body text; white reaches 1.04:1 and should stay off it. Black text passes on every amber shade from amber-50 to amber-600, 6 shades darker than amber-50.

Its nearest CSS named color, floralwhite (#fffaf0), is 0.008 away in OKLab, too close to tell apart by eye.

Tints and shades

  1. #fffefc
  2. #fffef8
  3. #fffdf5
  4. #fffcf2
  5. #fffcee
  6. #fffbeb
  7. #c8c5b8
  8. #949288
  9. #63615b
  10. #363531
  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. #fffbeb
  2. #529179
  3. #2a1a12
  4. #efbca8
  5. #4f4a66

Around amber-50 as swatch 1, Recolor's generator made a triadic palette, three hues a third of the wheel apart: #529179, #2a1a12, #efbca8, #4f4a66, drawn from a seed fixed by its hex. Open it in Recolor.

Using amber-50

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

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

Common questions

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

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

Is Tailwind amber-50 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-amber-50: oklch(98.7% 0.022 95.277); #fffbeb is its nearest sRGB color, since the value lies outside sRGB.

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

Yes, nearly: floralwhite (#fffaf0) is 0.008 away in OKLab, too close to tell apart by eye.

Sources