RecolorOpen Recolor

A violet-tinted white, black text passes AA

Tailwind violet-50

Tailwind violet-50 is oklch(96.9% 0.016 293.756) in Tailwind CSS 4.3.3, which is #f5f3ff in hex and rgb(245 243 255). Black text on it reaches 19.15:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#f5f3ffviolet-50
From the theme file of Tailwind CSS 4.3.3 (--color-violet-50), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(96.9% 0.016 293.756)
Hex#f5f3ff
RGBrgb(245 243 255)
HSLhsl(250 100% 98%)
CSS variablevar(--color-violet-50)
Nearest CSS namealiceblue #f0f8ff, 0.014 away in OKLab
White text1.10:1: AA fails, AAA fails, large text fails
Black text19.15:1: AA passes, AAA passes, large text passes

About violet-50

Tailwind violet-50 is a violet-tinted white: OKLCH lightness 96.9%, chroma 0.016, hue 293.8 degrees. It opens the violet scale as its lightest shade, 2.6 points of lightness above violet-100.

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

Black text on violet-50 measures 19.15:1, past the 7:1 of WCAG AAA, while white text manages only 1.10:1. Black text passes on every violet shade from violet-50 to violet-500, 5 shades darker than violet-50.

Its nearest CSS named color, aliceblue (#f0f8ff), is 0.014 away in OKLab, too close to tell apart by eye.

Tints and shades

  1. #fffdfd
  2. #fffafb
  3. #fff8fa
  4. #fff5f8
  5. #fff3f6
  6. #f5f3ff
  7. #c8bdc0
  8. #948b8e
  9. #635d5f
  10. #363233
  11. #0f0d0d

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. #f5f3ff
  2. #196552
  3. #dac1d2
  4. #35250a
  5. #8f83a4

Recolor's generator, with violet-50 locked as swatch 1 and the seed taken from its hex, drew a free palette, hues spread around the wheel: #196552, #dac1d2, #35250a, #8f83a4. Open it in Recolor.

Using violet-50

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

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

Common questions

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

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

Is Tailwind violet-50 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-violet-50: oklch(96.9% 0.016 293.756); #f5f3ff is its conversion to sRGB.

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

Yes, nearly: aliceblue (#f0f8ff) is 0.014 away in OKLab, too close to tell apart by eye.

Sources