RecolorOpen Recolor

A very dark purplish gray, white text passes AA

Tailwind mauve-800

Tailwind mauve-800 is oklch(26.3% 0.024 320.12) in Tailwind CSS 4.3.3, which is #2a212c in hex and rgb(42 33 44). White text on it reaches 15.53:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#2a212cmauve-800
From the theme file of Tailwind CSS 4.3.3 (--color-mauve-800), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(26.3% 0.024 320.12)
Hex#2a212c
RGBrgb(42 33 44)
HSLhsl(289 14% 15%)
CSS variablevar(--color-mauve-800)
Nearest CSS namemidnightblue #191970, 0.131 away in OKLab
White text15.53:1: AA passes, AAA passes, large text passes
Black text1.35:1: AA fails, AAA fails, large text fails

About mauve-800

Tailwind mauve-800 is a very dark purplish gray: OKLCH lightness 26.3%, chroma 0.024, hue 320.1 degrees. On Tailwind's mauve scale it sits between mauve-700 at 36.4% and mauve-900 at 21.2%.

HSL calls its lightness 15%, OKLCH 26.3%: 11 points between a formula and a measure of what the eye sees. Its value fits inside sRGB, so #2a212c is the same color, not an approximation.

White text on mauve-800 measures 15.53:1, past the 7:1 of WCAG AAA, while black text manages only 1.35:1. White text passes on every mauve shade from mauve-500 down, so mauve-800 is 3 shades past the line.

No CSS named color comes near it: the closest, midnightblue (#191970), is 0.131 away in OKLab.

Tints and shades

  1. #d8d6d8
  2. #b2aeb2
  3. #8d878e
  4. #6a636b
  5. #49414b
  6. #2a212c
  7. #1f1720
  8. #140e15
  9. #0a060a
  10. #030203

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. #2a212c
  2. #dab8eb
  3. #7a4879
  4. #edd8e1
  5. #b7787e

Recolor's generator, with mauve-800 locked as swatch 1 and the seed taken from its hex, drew an analogous palette, hues next to each other on the wheel: #dab8eb, #7a4879, #edd8e1, #b7787e. Open it in Recolor.

Using mauve-800

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

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

Common questions

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

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

Is Tailwind mauve-800 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-mauve-800: oklch(26.3% 0.024 320.12); #2a212c is its conversion to sRGB.

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

No. The nearest CSS named color is midnightblue (#191970), 0.131 away in OKLab.

Sources