RecolorOpen Recolor

A pale reddish gray, black text passes AA

Tailwind taupe-200

Tailwind taupe-200 is oklch(92.2% 0.005 34.3) in Tailwind CSS 4.3.3, which is #e8e4e3 in hex and rgb(232 228 227). Black text on it reaches 16.64:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#e8e4e3taupe-200
From the theme file of Tailwind CSS 4.3.3 (--color-taupe-200), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(92.2% 0.005 34.3)
Hex#e8e4e3
RGBrgb(232 228 227)
HSLhsl(12 10% 90%)
CSS variablevar(--color-taupe-200)
Nearest CSS namegainsboro #dcdcdc, 0.028 away in OKLab
White text1.26:1: AA fails, AAA fails, large text fails
Black text16.64:1: AA passes, AAA passes, large text passes

About taupe-200

Tailwind taupe-200 is a pale reddish gray: OKLCH lightness 92.2%, chroma 0.005, hue 34.3 degrees. On Tailwind's taupe scale it sits between taupe-100 at 96.0% and taupe-300 at 86.8%.

Here HSL's lightness, 90%, lands near OKLCH's 92.2%, which is not true of every color. Its value fits inside sRGB, so #e8e4e3 is the same color, not an approximation.

Black text on taupe-200 measures 16.64:1, past the 7:1 of WCAG AAA, while white text manages only 1.26:1. On the taupe scale black text works down to taupe-400, which leaves taupe-200 2 shades of margin.

The closest CSS named color is gainsboro (#dcdcdc), 0.028 away in OKLab: near, and still a visible step from it side by side.

Tints and shades

  1. #fbfafb
  2. #f7f6f6
  3. #f3f1f2
  4. #f0eded
  5. #ece8e9
  6. #e8e4e3
  7. #b6b3b3
  8. #868484
  9. #595858
  10. #302f2f
  11. #0c0c0c

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. #e8e4e3
  2. #035a37
  3. #d4abc0
  4. #33192d
  5. #009f68

Recolor's generator, with taupe-200 locked as swatch 1 and the seed taken from its hex, drew a complementary palette, built on the hue opposite: #035a37, #d4abc0, #33192d, #009f68. Open it in Recolor.

Using taupe-200

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

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

Common questions

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

No. White text measures 1.26:1 on taupe-200, under AA's 4.5:1; black text measures 16.64:1 and passes. The lightest taupe shade for white text is taupe-500.

Is Tailwind taupe-200 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-taupe-200: oklch(92.2% 0.005 34.3); #e8e4e3 is its conversion to sRGB.

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

No. The nearest CSS named color is gainsboro (#dcdcdc), 0.028 away in OKLab.

Sources