RecolorOpen Recolor

Eleven shades, from violet-50 to violet-950

Tailwind violet colors

Tailwind CSS 4.3.3 defines eleven violet shades in OKLCH, from violet-50 (#f5f3ff) to violet-950 (#2f0d68). On them white text passes WCAG AA from violet-600 to violet-950, and black text from violet-50 to violet-500. Recolor (recolor.page) shows the scale on a real page.

Last updated

  1. 50#f5f3ff
  2. 100#ede9fe
  3. 200#ddd6ff
  4. 300#c4b4ff
  5. 400#a684ff
  6. 500#8e51ff
  7. 600#7f22fe
  8. 700#7008e7
  9. 800#5d0ec0
  10. 900#4d179a
  11. 950#2f0d68
From the theme file of Tailwind CSS 4.3.3, converted with Recolor's color code, October 9, 2026; contrast as WCAG 2.2 defines it
ShadeOKLCHHexWhite textBlack text
violet-50oklch(96.9% 0.016 293.756)#f5f3ff1.10:1 fails19.15:1 passes
violet-100oklch(94.3% 0.029 294.588)#ede9fe1.19:1 fails17.69:1 passes
violet-200oklch(89.4% 0.057 293.283)#ddd6ff1.39:1 fails15.14:1 passes
violet-300oklch(81.1% 0.111 293.571)#c4b4ff1.86:1 fails11.32:1 passes
violet-400oklch(70.2% 0.183 293.541)#a684ff2.85:1 fails7.37:1 passes
violet-500oklch(60.6% 0.25 292.717)#8e51ff4.40:1 fails4.77:1 passes
violet-600oklch(54.1% 0.281 293.009)#7f22fe5.89:1 passes3.56:1 fails
violet-700oklch(49.1% 0.27 292.581)#7008e77.30:1 passes2.88:1 fails
violet-800oklch(43.2% 0.232 292.759)#5d0ec09.17:1 passes2.29:1 fails
violet-900oklch(38% 0.189 293.745)#4d179a11.03:1 passes1.90:1 fails
violet-950oklch(28.3% 0.141 291.089)#2f0d6815.24:1 passes1.38:1 fails

Text on violet, and violet as text

As a text color the rule turns around: violet text on a white page passes AA from violet-600 on, and on a black page up to violet-500, since a contrast ratio is the same whichever color is in front.

Chroma peaks at violet-600 (0.281) and falls toward both ends, while the hue drifts 3.5 degrees across the scale.

4 of the eleven lie outside sRGB, so their hex codes are the nearest sRGB colors, and a wide-gamut screen shows them stronger.

Sources