RecolorOpen Recolor

A grayish medium magenta, white text passes AA

Tailwind mauve-500

Tailwind mauve-500 is oklch(54.2% 0.034 322.5) in Tailwind CSS 4.3.3, which is #79697b in hex and rgb(121 105 123). White text on it reaches 5.10:1, passing WCAG AA. Recolor (recolor.page) shows it on a real page below.

Last updated

#79697bmauve-500
From the theme file of Tailwind CSS 4.3.3 (--color-mauve-500), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(54.2% 0.034 322.5)
Hex#79697b
RGBrgb(121 105 123)
HSLhsl(293 8% 45%)
CSS variablevar(--color-mauve-500)
Nearest CSS namedimgray #696969, 0.040 away in OKLab
White text5.10:1: AA passes, AAA fails, large text passes
Black text4.12:1: AA fails, AAA fails, large text passes

About mauve-500

Tailwind mauve-500 is a grayish medium magenta: OKLCH lightness 54.2%, chroma 0.034, hue 322.5 degrees. On Tailwind's mauve scale it sits between mauve-400 at 71.1% and mauve-600 at 43.5%.

Its lightness is 45% in HSL and 54.2% in OKLCH, 9 points apart; only the second tracks how light it looks. Its value fits inside sRGB, so #79697b is the same color, not an approximation.

White text on mauve-500 reaches 5.10:1, enough for WCAG AA body text but short of AAA's 7:1; black text gets 4.12:1. Going down the mauve scale, white text first reaches AA here; one shade lighter, mauve-400 gives it 2.58:1.

The closest CSS named color is dimgray (#696969), 0.040 away in OKLab: near, and still a visible step from it side by side.

Tints and shades

  1. #e8e4e8
  2. #d0cbd1
  3. #bab1bb
  4. #a498a5
  5. #8e8090
  6. #79697b
  7. #5d515f
  8. #433a45
  9. #2b242c
  10. #141015
  11. #030203

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. #79697b
  2. #e7f5ff
  3. #421a12
  4. #c8bc82
  5. #005e98

Recolor's generator, with mauve-500 locked as swatch 1 and the seed taken from its hex, drew a split-complementary palette, built on the two hues beside its opposite: #e7f5ff, #421a12, #c8bc82, #005e98. Open it in Recolor.

Using mauve-500

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

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

Common questions

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

Yes. White text measures 5.10:1 on mauve-500, above the 4.5:1 that WCAG AA asks of body text.

Is Tailwind mauve-500 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-mauve-500: oklch(54.2% 0.034 322.5); #79697b is its conversion to sRGB.

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

No. The nearest CSS named color is dimgray (#696969), 0.040 away in OKLab.

Sources