RecolorOpen Recolor

A very dark reddish gray, white text passes AA

Tailwind taupe-800

Tailwind taupe-800 is oklch(26.8% 0.011 36.5) in Tailwind CSS 4.3.3, which is #2b2422 in hex and rgb(43 36 34). White text on it reaches 15.24:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#2b2422taupe-800
From the theme file of Tailwind CSS 4.3.3 (--color-taupe-800), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(26.8% 0.011 36.5)
Hex#2b2422
RGBrgb(43 36 34)
HSLhsl(13 12% 15%)
CSS variablevar(--color-taupe-800)
Nearest CSS namedarkslategray #2f4f4f, 0.144 away in OKLab
White text15.24:1: AA passes, AAA passes, large text passes
Black text1.38:1: AA fails, AAA fails, large text fails

About taupe-800

Tailwind taupe-800 is a very dark reddish gray: OKLCH lightness 26.8%, chroma 0.011, hue 36.5 degrees. On Tailwind's taupe scale it sits between taupe-700 at 36.7% and taupe-900 at 21.4%.

Its lightness is 15% in HSL and 26.8% in OKLCH, 12 points apart; only the second tracks how light it looks. Its value fits inside sRGB, so #2b2422 is the same color, not an approximation.

White text on taupe-800 measures 15.24:1, past the 7:1 of WCAG AAA, while black text manages only 1.38:1. On the taupe scale white text works from taupe-500 to taupe-950; taupe-800 has 3 shades of margin.

CSS has no keyword in its neighborhood; darkslategray (#2f4f4f) is the nearest, a long 0.144 away in OKLab.

Tints and shades

  1. #d8d6d7
  2. #b2afaf
  3. #8d898a
  4. #6a6566
  5. #494345
  6. #2b2422
  7. #1f191b
  8. #141011
  9. #0a0708
  10. #030202

From light to dark: 5 toward white and 4 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. #2b2422
  2. #8d852c
  3. #e6e5ff
  4. #505073
  5. #c9bcff

Recolor's generator, with taupe-800 locked as swatch 1 and the seed taken from its hex, drew a complementary palette, built on the hue opposite: #8d852c, #e6e5ff, #505073, #c9bcff. Open it in Recolor.

Using taupe-800

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

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

Common questions

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

Yes. White text measures 15.24:1 on taupe-800, above the 4.5:1 that WCAG AA asks of body text, and above AAA's 7:1 too.

Is Tailwind taupe-800 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-taupe-800: oklch(26.8% 0.011 36.5); #2b2422 is its conversion to sRGB.

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

No. The nearest CSS named color is darkslategray (#2f4f4f), 0.144 away in OKLab.

Sources