RecolorOpen Recolor

A medium purplish gray, black text passes AA

Tailwind mauve-400

The hex code of Tailwind mauve-400 is #a89ea9 (rgb(168 158 169)), from its Tailwind CSS 4.3.3 value oklch(71.1% 0.019 323.02). Black text on it reaches 8.13:1, passing WCAG AAA; below, Recolor (recolor.page) puts it on a page.

Last updated

#a89ea9mauve-400
From the theme file of Tailwind CSS 4.3.3 (--color-mauve-400), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(71.1% 0.019 323.02)
Hex#a89ea9
RGBrgb(168 158 169)
HSLhsl(295 6% 64%)
CSS variablevar(--color-mauve-400)
Nearest CSS namedarkgray #a9a9a9, 0.031 away in OKLab
White text2.58:1: AA fails, AAA fails, large text fails
Black text8.13:1: AA passes, AAA passes, large text passes

About mauve-400

Read as numbers, mauve-400 is lightness 71.1%, chroma 0.019 and hue 323.0 degrees; read by eye, it is a medium purplish gray. Its neighbors on the mauve scale are mauve-300, 15.4 points lighter, and mauve-500, 16.9 points darker.

HSL calls its lightness 64%, OKLCH 71.1%: 7 points between a formula and a measure of what the eye sees. No gamut mapping is needed here: oklch(71.1% 0.019 323.02) sits inside sRGB and #a89ea9 matches it.

Black on mauve-400 reads at 8.13:1, enough for AAA body text; white reaches 2.58:1 and should stay off it. It is the darkest mauve shade that still carries black body text; mauve-500 drops to 4.12:1.

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

Tints and shades

  1. #f1eeef
  2. #e3dddf
  3. #d5cdcf
  4. #c8bdc0
  5. #baadb0
  6. #a89ea9
  7. #877a7d
  8. #63595c
  9. #413a3c
  10. #211d1e
  11. #060505

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. #a89ea9
  2. #4e5b32
  3. #ffe1f4
  4. #0091c3
  5. #371314

Around mauve-400 as swatch 1, Recolor's generator made a free palette, hues spread around the wheel: #4e5b32, #ffe1f4, #0091c3, #371314, drawn from a seed fixed by its hex. Open it in Recolor.

Using mauve-400

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

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

Common questions

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

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

Is Tailwind mauve-400 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-mauve-400: oklch(71.1% 0.019 323.02); #a89ea9 is its conversion to sRGB.

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

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

Sources