RecolorOpen Recolor

A pale violet, black text passes AA

Tailwind purple-200

Tailwind purple-200 is oklch(90.2% 0.063 306.703) in Tailwind CSS 4.3.3, which is #e9d4ff as the nearest sRGB hex and rgb(233 212 255). Black text on it reaches 15.33:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#e9d4ffpurple-200
From the theme file of Tailwind CSS 4.3.3 (--color-purple-200), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(90.2% 0.063 306.703)
Hex#e9d4ff, the nearest color in sRGB
RGBrgb(233 212 255)
HSLhsl(269 100% 92%)
OKLCH of the hexoklch(90.0% 0.062 307.2)
CSS variablevar(--color-purple-200)
Nearest CSS namelavender #e6e6fa, 0.049 away in OKLab
White text1.37:1: AA fails, AAA fails, large text fails
Black text15.33:1: AA passes, AAA passes, large text passes

About purple-200

Tailwind purple-200 is a pale violet: OKLCH lightness 90.2%, chroma 0.063, hue 306.7 degrees. On Tailwind's purple scale it sits between purple-100 at 94.6% and purple-300 at 82.7%.

Here HSL's lightness, 92%, lands near OKLCH's 90.2%, which is not true of every color. Its value lies outside sRGB, the colors a hex code can name: #e9d4ff is what CSS Color 4's gamut mapping makes of it, chroma 0.062 instead of 0.063, moving 0.2 points of lightness and 0.5 degrees of hue. A wide-gamut screen shows the stronger original.

Black text on purple-200 measures 15.33:1, past the 7:1 of WCAG AAA, while white text manages only 1.37:1. On the purple scale black text works down to purple-500, which leaves purple-200 3 shades of margin.

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

Tints and shades

  1. #fbf8ff
  2. #f8f1ff
  3. #f4eaff
  4. #f0e2ff
  5. #eddbff
  6. #e9d4ff
  7. #b7a6c8
  8. #877a94
  9. #5a5163
  10. #312b36
  11. #0c0a0f

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. #e9d4ff
  2. #564470
  3. #d5ad89
  4. #2d251d
  5. #1e9c8f

Recolor's generator, with purple-200 locked as swatch 1 and the seed taken from its hex, drew a triadic palette, three hues a third of the wheel apart: #564470, #d5ad89, #2d251d, #1e9c8f. Open it in Recolor.

Using purple-200

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

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

Common questions

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

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

Is Tailwind purple-200 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-purple-200: oklch(90.2% 0.063 306.703); #e9d4ff is its nearest sRGB color, since the value lies outside sRGB.

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

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

Sources