RecolorOpen Recolor

A pale yellowish gray, black text passes AA

Tailwind olive-200

In Tailwind CSS 4.3.3, olive-200 is defined as oklch(93% 0.007 106.5); in hex that is #e8e8e3, or rgb(232 232 227). Black text on it reaches 17.08:1, passing WCAG AAA, and Recolor (recolor.page) can show it on a real page.

Last updated

#e8e8e3olive-200
From the theme file of Tailwind CSS 4.3.3 (--color-olive-200), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(93% 0.007 106.5)
Hex#e8e8e3
RGBrgb(232 232 227)
HSLhsl(60 10% 90%)
CSS variablevar(--color-olive-200)
Nearest CSS nameantiquewhite #faebd7, 0.031 away in OKLab
White text1.23:1: AA fails, AAA fails, large text fails
Black text17.08:1: AA passes, AAA passes, large text passes

About olive-200

In OKLCH, olive-200 has a lightness of 93.0%, a chroma of 0.007 and a hue of 106.5 degrees, which makes it a pale yellowish gray. The step up to olive-100 is 3.6 points of lightness, and the step down to olive-300 5.0 points.

Here HSL's lightness, 90%, lands near OKLCH's 93.0%, which is not true of every color. The value lies inside sRGB, the gamut of a hex code, so olive-200 converts to #e8e8e3 without losing chroma.

For text, olive-200 wants black: 17.08:1 clears even AAA's 7:1, and white at 1.23:1 fails AA. On the olive scale black text works down to olive-500, which leaves olive-200 3 shades of margin.

Among the CSS keywords, antiquewhite (#faebd7) comes closest at 0.031 in OKLab, close enough to stand in for it in a sketch.

Tints and shades

  1. #fcfbfb
  2. #f9f7f7
  3. #f5f2f3
  4. #f2eeef
  5. #efeaeb
  6. #e8e8e3
  7. #b9b4b5
  8. #888586
  9. #5b5959
  10. #313030
  11. #0d0c0c

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. #e8e8e3
  2. #2f6465
  3. #95c4cd
  4. #002635
  5. #5795c4

Locked as the first of five swatches, olive-200 gets #2f6465, #95c4cd, #002635, #5795c4 from Recolor's generator, an analogous palette, hues next to each other on the wheel. The seed is its hex, so the palette stays the same. Open it in Recolor.

Using olive-200

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

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

Common questions

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

No. White text measures 1.23:1 on olive-200, under AA's 4.5:1; black text measures 17.08:1 and passes. The lightest olive shade for white text is olive-600.

Is Tailwind olive-200 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-olive-200: oklch(93% 0.007 106.5); #e8e8e3 is its conversion to sRGB.

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

No. The nearest CSS named color is antiquewhite (#faebd7), 0.031 away in OKLab.

Sources