RecolorOpen Recolor

A dark purplish gray, white text passes AA

Tailwind mauve-700

The hex code of Tailwind mauve-700 is #463947 (rgb(70 57 71)), from its Tailwind CSS 4.3.3 value oklch(36.4% 0.029 323.89). White text on it reaches 10.84:1, passing WCAG AAA; below, Recolor (recolor.page) puts it on a page.

Last updated

#463947mauve-700
From the theme file of Tailwind CSS 4.3.3 (--color-mauve-700), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(36.4% 0.029 323.89)
Hex#463947
RGBrgb(70 57 71)
HSLhsl(296 11% 25%)
CSS variablevar(--color-mauve-700)
Nearest CSS namedarkslategray #2f4f4f, 0.072 away in OKLab
White text10.84:1: AA passes, AAA passes, large text passes
Black text1.94:1: AA fails, AAA fails, large text fails

About mauve-700

Read as numbers, mauve-700 is lightness 36.4%, chroma 0.029 and hue 323.9 degrees; read by eye, it is a dark purplish gray. Its neighbors on the mauve scale are mauve-600, 7.1 points lighter, and mauve-800, 10.1 points darker.

Its lightness is 25% in HSL and 36.4% in OKLCH, 11 points apart; only the second tracks how light it looks. No gamut mapping is needed here: oklch(36.4% 0.029 323.89) sits inside sRGB and #463947 matches it.

White on mauve-700 reads at 10.84:1, enough for AAA body text; black reaches 1.94:1 and should stay off it. On the mauve scale white text works from mauve-500 to mauve-950; mauve-700 has 2 shades of margin.

No CSS keyword matches it; darkslategray (#2f4f4f) is the nearest, 0.072 away in OKLab, a clear step off.

Tints and shades

  1. #dedbde
  2. #bdb8bd
  3. #9e969e
  4. #7f7580
  5. #625663
  6. #463947
  7. #352b36
  8. #251d25
  9. #151016
  10. #070508
  11. #010101

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. #463947
  2. #eaeed7
  3. #008cca
  4. #2a2e00
  5. #f0b5cc

Around mauve-700 as swatch 1, Recolor's generator made a triadic palette, three hues a third of the wheel apart: #eaeed7, #008cca, #2a2e00, #f0b5cc, drawn from a seed fixed by its hex. Open it in Recolor.

Using mauve-700

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

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

Common questions

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

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

Is Tailwind mauve-700 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-mauve-700: oklch(36.4% 0.029 323.89); #463947 is its conversion to sRGB.

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

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

Sources