RecolorOpen Recolor

A medium reddish gray, black text passes AA

Tailwind taupe-400

The hex code of Tailwind taupe-400 is #aba09c (rgb(171 160 156)), from its Tailwind CSS 4.3.3 value oklch(71.4% 0.014 41.2). Black text on it reaches 8.24:1, passing WCAG AAA; below, Recolor (recolor.page) puts it on a page.

Last updated

#aba09ctaupe-400
From the theme file of Tailwind CSS 4.3.3 (--color-taupe-400), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(71.4% 0.014 41.2)
Hex#aba09c
RGBrgb(171 160 156)
HSLhsl(16 8% 64%)
CSS variablevar(--color-taupe-400)
Nearest CSS namedarkgray #a9a9a9, 0.025 away in OKLab
White text2.55:1: AA fails, AAA fails, large text fails
Black text8.24:1: AA passes, AAA passes, large text passes

About taupe-400

Read as numbers, taupe-400 is lightness 71.4%, chroma 0.014 and hue 41.2 degrees; read by eye, it is a medium reddish gray. Its neighbors on the taupe scale are taupe-300, 15.4 points lighter, and taupe-500, 16.7 points darker.

Its lightness is 64% in HSL and 71.4% in OKLCH, 7 points apart; only the second tracks how light it looks. No gamut mapping is needed here: oklch(71.4% 0.014 41.2) sits inside sRGB and #aba09c matches it.

Black on taupe-400 reads at 8.24:1, enough for AAA body text; white reaches 2.55:1 and should stay off it. Black text holds AA down to here on the taupe scale; at taupe-500 it falls to 4.24:1.

Of the named colors, darkgray (#a9a9a9) is the nearest, 0.025 away in OKLab; next to each other the two still differ.

Tints and shades

  1. #f1eeef
  2. #e2dedf
  3. #d4ced0
  4. #c6bec0
  5. #b8afb1
  6. #aba09c
  7. #857c7e
  8. #615a5c
  9. #403b3c
  10. #211e1f
  11. #060506

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. #aba09c
  2. #5c4e7b
  3. #f8d8c4
  4. #2b957f
  5. #152712

Around taupe-400 as swatch 1, Recolor's generator made a free palette, hues spread around the wheel: #5c4e7b, #f8d8c4, #2b957f, #152712, drawn from a seed fixed by its hex. Open it in Recolor.

Using taupe-400

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

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

Common questions

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

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

Is Tailwind taupe-400 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-taupe-400: oklch(71.4% 0.014 41.2); #aba09c is its conversion to sRGB.

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

No. The nearest CSS named color is darkgray (#a9a9a9), 0.025 away in OKLab.

Sources