RecolorOpen Recolor

A pale gray, black text passes AA

Tailwind mauve-100

The hex code of Tailwind mauve-100 is #f3f1f3 (rgb(243 241 243)), from its Tailwind CSS 4.3.3 value oklch(96% 0.003 325.6). Black text on it reaches 18.69:1, passing WCAG AAA; below, Recolor (recolor.page) puts it on a page.

Last updated

#f3f1f3mauve-100
From the theme file of Tailwind CSS 4.3.3 (--color-mauve-100), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(96% 0.003 325.6)
Hex#f3f1f3
RGBrgb(243 241 243)
HSLhsl(300 8% 95%)
CSS variablevar(--color-mauve-100)
Nearest CSS namewhitesmoke #f5f5f5, 0.010 away in OKLab
White text1.12:1: AA fails, AAA fails, large text fails
Black text18.69:1: AA passes, AAA passes, large text passes

About mauve-100

Read as numbers, mauve-100 is lightness 96.0%, chroma 0.003 and hue 325.6 degrees; read by eye, it is a pale gray. Its neighbors on the mauve scale are mauve-50, 2.5 points lighter, and mauve-200, 3.8 points darker.

Here HSL's lightness, 95%, lands near OKLCH's 96.0%, which is not true of every color. No gamut mapping is needed here: oklch(96% 0.003 325.6) sits inside sRGB and #f3f1f3 matches it.

Black on mauve-100 reads at 18.69:1, enough for AAA body text; white reaches 1.12:1 and should stay off it. On the mauve scale black text works down to mauve-400, which leaves mauve-100 3 shades of margin.

The CSS keyword whitesmoke (#f5f5f5) is almost the same color: 0.010 apart in OKLab, under the step most people notice.

Tints and shades

  1. #fdfdfd
  2. #fbfafb
  3. #f9f8f8
  4. #f8f6f6
  5. #f6f3f4
  6. #f3f1f3
  7. #bfbdbe
  8. #8d8c8c
  9. #5e5d5d
  10. #333333
  11. #0d0d0d

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. #f3f1f3
  2. #997aa1
  3. #1d2f28
  4. #eca0ef
  5. #943d3f

Around mauve-100 as swatch 1, Recolor's generator made a split-complementary palette, built on the two hues beside its opposite: #997aa1, #1d2f28, #eca0ef, #943d3f, drawn from a seed fixed by its hex. Open it in Recolor.

Using mauve-100

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

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

Common questions

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

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

Is Tailwind mauve-100 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-mauve-100: oklch(96% 0.003 325.6); #f3f1f3 is its conversion to sRGB.

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

Yes, nearly: whitesmoke (#f5f5f5) is 0.010 away in OKLab, too close to tell apart by eye.

Sources