RecolorOpen Recolor

A pale purplish gray, black text passes AA

Tailwind mauve-200

Tailwind mauve-200 is oklch(92.2% 0.005 325.62) in Tailwind CSS 4.3.3, which is #e7e4e7 in hex and rgb(231 228 231). Black text on it reaches 16.65:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#e7e4e7mauve-200
From the theme file of Tailwind CSS 4.3.3 (--color-mauve-200), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(92.2% 0.005 325.62)
Hex#e7e4e7
RGBrgb(231 228 231)
HSLhsl(300 6% 90%)
CSS variablevar(--color-mauve-200)
Nearest CSS namelavender #e6e6fa, 0.025 away in OKLab
White text1.26:1: AA fails, AAA fails, large text fails
Black text16.65:1: AA passes, AAA passes, large text passes

About mauve-200

Tailwind mauve-200 is a pale purplish gray: OKLCH lightness 92.2%, chroma 0.005, hue 325.6 degrees. On Tailwind's mauve scale it sits between mauve-100 at 96.0% and mauve-300 at 86.5%.

HSL and OKLCH agree on how light it is, 90% and 92.2%. Its value fits inside sRGB, so #e7e4e7 is the same color, not an approximation.

Black text on mauve-200 measures 16.65:1, past the 7:1 of WCAG AAA, while white text manages only 1.26:1. Black text passes on every mauve shade from mauve-50 to mauve-400, 2 shades darker than mauve-200.

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

Tints and shades

  1. #fbfafb
  2. #f7f6f6
  3. #f4f1f2
  4. #f0edee
  5. #ece8e9
  6. #e7e4e7
  7. #b6b2b3
  8. #868484
  9. #5a5858
  10. #302f30
  11. #0c0c0c

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. #e7e4e7
  2. #a87966
  3. #1d2531
  4. #8ebfc2
  5. #6a422b

Recolor's generator, with mauve-200 locked as swatch 1 and the seed taken from its hex, drew a split-complementary palette, built on the two hues beside its opposite: #a87966, #1d2531, #8ebfc2, #6a422b. Open it in Recolor.

Using mauve-200

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

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

Common questions

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

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

Is Tailwind mauve-200 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-mauve-200: oklch(92.2% 0.005 325.62); #e7e4e7 is its conversion to sRGB.

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

No. The nearest CSS named color is lavender (#e6e6fa), 0.025 away in OKLab.

Sources