RecolorOpen Recolor

A pale violet, black text passes AA

Tailwind purple-100

The hex code of Tailwind purple-100 is #f3e8ff (rgb(243 232 255)), from its Tailwind CSS 4.3.3 value oklch(94.6% 0.033 307.174). Black text on it reaches 17.80:1, passing WCAG AAA; below, Recolor (recolor.page) puts it on a page.

Last updated

#f3e8ffpurple-100
From the theme file of Tailwind CSS 4.3.3 (--color-purple-100), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(94.6% 0.033 307.174)
Hex#f3e8ff
RGBrgb(243 232 255)
HSLhsl(269 100% 95%)
CSS variablevar(--color-purple-100)
Nearest CSS namelavender #e6e6fa, 0.020 away in OKLab
White text1.18:1: AA fails, AAA fails, large text fails
Black text17.80:1: AA passes, AAA passes, large text passes

About purple-100

Read as numbers, purple-100 is lightness 94.6%, chroma 0.033 and hue 307.2 degrees; read by eye, it is a pale violet. Its neighbors on the purple scale are purple-50, 3.1 points lighter, and purple-200, 4.4 points darker.

HSL and OKLCH agree on how light it is, 95% and 94.6%. No gamut mapping is needed here: oklch(94.6% 0.033 307.174) sits inside sRGB and #f3e8ff matches it.

Black on purple-100 reads at 17.80:1, enough for AAA body text; white reaches 1.18:1 and should stay off it. Black text passes on every purple shade from purple-50 to purple-500, 4 shades darker than purple-100.

Its nearest CSS named color, lavender (#e6e6fa), is 0.020 away in OKLab, too close to tell apart by eye.

Tints and shades

  1. #fdfbff
  2. #fbf7ff
  3. #f9f4ff
  4. #f7f0ff
  5. #f5ecff
  6. #f3e8ff
  7. #bfb6c8
  8. #8d8694
  9. #5e5963
  10. #333036
  11. #0d0c0f

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. #f3e8ff
  2. #713b2b
  3. #84c391
  4. #2b1610
  5. #76809c

Around purple-100 as swatch 1, Recolor's generator made a triadic palette, three hues a third of the wheel apart: #713b2b, #84c391, #2b1610, #76809c, drawn from a seed fixed by its hex. Open it in Recolor.

Using purple-100

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

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

Common questions

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

No. White text measures 1.18:1 on purple-100, under AA's 4.5:1; black text measures 17.80:1 and passes. The lightest purple shade for white text is purple-600.

Is Tailwind purple-100 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-purple-100: oklch(94.6% 0.033 307.174); #f3e8ff is its conversion to sRGB.

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

Yes, nearly: lavender (#e6e6fa) is 0.020 away in OKLab, too close to tell apart by eye.

Sources