RecolorOpen Recolor

A very dark purplish gray, white text passes AA

Tailwind mauve-900

In Tailwind CSS 4.3.3, mauve-900 is defined as oklch(21.2% 0.019 322.12); in hex that is #1d161e, or rgb(29 22 30). White text on it reaches 17.71:1, passing WCAG AAA, and Recolor (recolor.page) can show it on a real page.

Last updated

#1d161emauve-900
From the theme file of Tailwind CSS 4.3.3 (--color-mauve-900), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(21.2% 0.019 322.12)
Hex#1d161e
RGBrgb(29 22 30)
HSLhsl(293 15% 10%)
CSS variablevar(--color-mauve-900)
Nearest CSS namemidnightblue #191970, 0.152 away in OKLab
White text17.71:1: AA passes, AAA passes, large text passes
Black text1.19:1: AA fails, AAA fails, large text fails

About mauve-900

In OKLCH, mauve-900 has a lightness of 21.2%, a chroma of 0.019 and a hue of 322.1 degrees, which makes it a very dark purplish gray. The step up to mauve-800 is 5.1 points of lightness, and the step down to mauve-950 6.7 points.

Its lightness is 10% in HSL and 21.2% in OKLCH, 11 points apart; only the second tracks how light it looks. The value lies inside sRGB, the gamut of a hex code, so mauve-900 converts to #1d161e without losing chroma.

For text, mauve-900 wants white: 17.71:1 clears even AAA's 7:1, and black at 1.19:1 fails AA. On the mauve scale white text works from mauve-500 to mauve-950; mauve-900 has 4 shades of margin.

CSS has no keyword in its neighborhood; midnightblue (#191970) is the nearest, a long 0.152 away in OKLab.

Tints and shades

  1. #d6d3d4
  2. #aea8aa
  3. #878082
  4. #63595c
  5. #403638
  6. #1d161e
  7. #170e11
  8. #0e0709
  9. #060304
  10. #020101

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. #1d161e
  2. #288bb9
  3. #f6d5d3
  4. #4b645f
  5. #e8b1ac

Locked as the first of five swatches, mauve-900 gets #288bb9, #f6d5d3, #4b645f, #e8b1ac from Recolor's generator, a split-complementary palette, built on the two hues beside its opposite. The seed is its hex, so the palette stays the same. Open it in Recolor.

Using mauve-900

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

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

Common questions

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

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

Is Tailwind mauve-900 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-mauve-900: oklch(21.2% 0.019 322.12); #1d161e is its conversion to sRGB.

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

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

Sources