RecolorOpen Recolor

A pale violet, black text passes AA

Tailwind violet-100

In Tailwind CSS 4.3.3, violet-100 is defined as oklch(94.3% 0.029 294.588); in hex that is #ede9fe, or rgb(237 233 254). Black text on it reaches 17.69:1, passing WCAG AAA, and Recolor (recolor.page) can show it on a real page.

Last updated

#ede9feviolet-100
From the theme file of Tailwind CSS 4.3.3 (--color-violet-100), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(94.3% 0.029 294.588)
Hex#ede9fe
RGBrgb(237 233 254)
HSLhsl(251 91% 95%)
CSS variablevar(--color-violet-100)
Nearest CSS namelavender #e6e6fa, 0.013 away in OKLab
White text1.19:1: AA fails, AAA fails, large text fails
Black text17.69:1: AA passes, AAA passes, large text passes

About violet-100

In OKLCH, violet-100 has a lightness of 94.3%, a chroma of 0.029 and a hue of 294.6 degrees, which makes it a pale violet. The step up to violet-50 is 2.6 points of lightness, and the step down to violet-200 4.9 points.

Here HSL's lightness, 95%, lands near OKLCH's 94.3%, which is not true of every color. The value lies inside sRGB, the gamut of a hex code, so violet-100 converts to #ede9fe without losing chroma.

For text, violet-100 wants black: 17.69:1 clears even AAA's 7:1, and white at 1.19:1 fails AA. On the violet scale black text works down to violet-500, which leaves violet-100 4 shades of margin.

The CSS keyword lavender (#e6e6fa) is almost the same color: 0.013 apart in OKLab, under the step most people notice.

Tints and shades

  1. #fcfbff
  2. #f9f8ff
  3. #f6f4ff
  4. #f3f0fe
  5. #f0edfe
  6. #ede9fe
  7. #bab7c7
  8. #898793
  9. #5c5a63
  10. #323136
  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. #ede9fe
  2. #713252
  3. #aac2a7
  4. #00302d
  5. #b68471

Locked as the first of five swatches, violet-100 gets #713252, #aac2a7, #00302d, #b68471 from Recolor's generator, a free palette, hues spread around the wheel. The seed is its hex, so the palette stays the same. Open it in Recolor.

Using violet-100

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

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

Common questions

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

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

Is Tailwind violet-100 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-violet-100: oklch(94.3% 0.029 294.588); #ede9fe is its conversion to sRGB.

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

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

Sources