RecolorOpen Recolor

A dark purplish gray, white text passes AA

Tailwind mauve-600

In Tailwind CSS 4.3.3, mauve-600 is defined as oklch(43.5% 0.029 321.78); in hex that is #594c5b, or rgb(89 76 91). White text on it reaches 8.05:1, passing WCAG AAA, and Recolor (recolor.page) can show it on a real page.

Last updated

#594c5bmauve-600
From the theme file of Tailwind CSS 4.3.3 (--color-mauve-600), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(43.5% 0.029 321.78)
Hex#594c5b
RGBrgb(89 76 91)
HSLhsl(292 9% 33%)
CSS variablevar(--color-mauve-600)
Nearest CSS namedarkslategray #2f4f4f, 0.068 away in OKLab
White text8.05:1: AA passes, AAA passes, large text passes
Black text2.61:1: AA fails, AAA fails, large text fails

About mauve-600

In OKLCH, mauve-600 has a lightness of 43.5%, a chroma of 0.029 and a hue of 321.8 degrees, which makes it a dark purplish gray. The step up to mauve-500 is 10.7 points of lightness, and the step down to mauve-700 7.1 points.

HSL calls its lightness 33%, OKLCH 43.5%: 11 points between a formula and a measure of what the eye sees. The value lies inside sRGB, the gamut of a hex code, so mauve-600 converts to #594c5b without losing chroma.

For text, mauve-600 wants white: 8.05:1 clears even AAA's 7:1, and black at 2.61:1 fails AA. White text passes on every mauve shade from mauve-500 down, so mauve-600 is 1 shade past the line.

The nearest CSS named color, darkslategray (#2f4f4f), is 0.068 away in OKLab: related, but plainly a different color.

Tints and shades

  1. #e1dfe2
  2. #c4bfc5
  3. #a8a1a9
  4. #8d838e
  5. #726774
  6. #594c5b
  7. #443a46
  8. #302831
  9. #1d181e
  10. #0c090d
  11. #020102

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. #594c5b
  2. #ddc6a9
  3. #291a32
  4. #cff6f1
  5. #9678a2

Locked as the first of five swatches, mauve-600 gets #ddc6a9, #291a32, #cff6f1, #9678a2 from Recolor's generator, a triadic palette, three hues a third of the wheel apart. The seed is its hex, so the palette stays the same. Open it in Recolor.

Using mauve-600

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

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

Common questions

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

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

Is Tailwind mauve-600 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-mauve-600: oklch(43.5% 0.029 321.78); #594c5b is its conversion to sRGB.

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

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

Sources