RecolorOpen Recolor

A light purplish gray, black text passes AA

Tailwind mauve-300

In Tailwind CSS 4.3.3, mauve-300 is defined as oklch(86.5% 0.012 325.68); in hex that is #d7d0d7, or rgb(215 208 215). Black text on it reaches 13.89:1, passing WCAG AAA, and Recolor (recolor.page) can show it on a real page.

Last updated

#d7d0d7mauve-300
From the theme file of Tailwind CSS 4.3.3 (--color-mauve-300), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(86.5% 0.012 325.68)
Hex#d7d0d7
RGBrgb(215 208 215)
HSLhsl(300 8% 83%)
CSS variablevar(--color-mauve-300)
Nearest CSS namelightgray #d3d3d3, 0.012 away in OKLab
White text1.51:1: AA fails, AAA fails, large text fails
Black text13.89:1: AA passes, AAA passes, large text passes

About mauve-300

In OKLCH, mauve-300 has a lightness of 86.5%, a chroma of 0.012 and a hue of 325.7 degrees, which makes it a light purplish gray. The step up to mauve-200 is 5.7 points of lightness, and the step down to mauve-400 15.4 points.

Here HSL's lightness, 83%, lands near OKLCH's 86.5%, which is not true of every color. The value lies inside sRGB, the gamut of a hex code, so mauve-300 converts to #d7d0d7 without losing chroma.

For text, mauve-300 wants black: 13.89:1 clears even AAA's 7:1, and white at 1.51:1 fails AA. On the mauve scale black text works down to mauve-400, which leaves mauve-300 1 shade of margin.

The CSS keyword lightgray (#d3d3d3) is almost the same color: 0.012 apart in OKLab, under the step most people notice.

Tints and shades

  1. #f9f7f7
  2. #f3eff0
  3. #ece7e8
  4. #e6dfe1
  5. #e0d7da
  6. #d7d0d7
  7. #aba2a4
  8. #7e7779
  9. #544f50
  10. #2d2a2b
  11. #0b0a0a

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. #d7d0d7
  2. #005959
  3. #ffa5ad
  4. #002b28
  5. #bc797d

Locked as the first of five swatches, mauve-300 gets #005959, #ffa5ad, #002b28, #bc797d from Recolor's generator, a complementary palette, built on the hue opposite. The seed is its hex, so the palette stays the same. Open it in Recolor.

Using mauve-300

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

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

Common questions

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

No. White text measures 1.51:1 on mauve-300, under AA's 4.5:1; black text measures 13.89:1 and passes. The lightest mauve shade for white text is mauve-500.

Is Tailwind mauve-300 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-mauve-300: oklch(86.5% 0.012 325.68); #d7d0d7 is its conversion to sRGB.

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

Yes, nearly: lightgray (#d3d3d3) is 0.012 away in OKLab, too close to tell apart by eye.

Sources