RecolorOpen Recolor

A warm white, black text passes AA

Tailwind orange-50

In Tailwind CSS 4.3.3, orange-50 is defined as oklch(98% 0.016 73.684); as the nearest sRGB hex that is #fff7ed, or rgb(255 247 237). Black text on it reaches 19.78:1, passing WCAG AAA, and Recolor (recolor.page) can show it on a real page.

Last updated

#fff7edorange-50
From the theme file of Tailwind CSS 4.3.3 (--color-orange-50), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(98% 0.016 73.684)
Hex#fff7ed, the nearest color in sRGB
RGBrgb(255 247 237)
HSLhsl(33 100% 96%)
OKLCH of the hexoklch(98.0% 0.016 73.7)
CSS variablevar(--color-orange-50)
Nearest CSS nameseashell #fff5ee, 0.006 away in OKLab
White text1.06:1: AA fails, AAA fails, large text fails
Black text19.78:1: AA passes, AAA passes, large text passes

About orange-50

In OKLCH, orange-50 has a lightness of 98.0%, a chroma of 0.016 and a hue of 73.7 degrees, which makes it a warm white. As the first of the eleven orange shades it sits closest to white, 2.0 points below it and 2.6 points above orange-100.

Here HSL's lightness, 96%, lands near OKLCH's 98.0%, which is not true of every color. Orange-50 is one of the 95 colors in Tailwind CSS 4.3.3 that sRGB cannot hold. Its hex, #fff7ed, gives up 0.000 of chroma and moves 0.0 points of lightness and 0.0 degrees of hue; a Display P3 screen shows the full value.

For text, orange-50 wants black: 19.78:1 clears even AAA's 7:1, and white at 1.06:1 fails AA. On the orange scale black text works down to orange-600, which leaves orange-50 6 shades of margin.

The CSS keyword seashell (#fff5ee) is almost the same color: 0.006 apart in OKLab, under the step most people notice.

Tints and shades

  1. #fffdfe
  2. #fffbfd
  3. #fffafb
  4. #fff8fa
  5. #fff6f9
  6. #fff7ed
  7. #cbc0c2
  8. #968e90
  9. #645f60
  10. #373334
  11. #0f0d0e

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. #fff7ed
  2. #917c4d
  3. #231d0a
  4. #c5b280
  5. #67541e

Locked as the first of five swatches, orange-50 gets #917c4d, #231d0a, #c5b280, #67541e from Recolor's generator, a monochromatic palette, one hue in five lightnesses. The seed is its hex, so the palette stays the same. Open it in Recolor.

Using orange-50

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

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

Common questions

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

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

Is Tailwind orange-50 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-orange-50: oklch(98% 0.016 73.684); #fff7ed is its nearest sRGB color, since the value lies outside sRGB.

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

Yes, nearly: seashell (#fff5ee) is 0.006 away in OKLab, too close to tell apart by eye.

Sources