RecolorOpen Recolor

Eleven shades, from purple-50 to purple-950

Tailwind purple colors

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

Last updated

  1. 50#faf5ff
  2. 100#f3e8ff
  3. 200#e9d4ff
  4. 300#dab2ff
  5. 400#c27aff
  6. 500#ad46ff
  7. 600#9810fa
  8. 700#8200db
  9. 800#6e11b0
  10. 900#59168b
  11. 950#3c0366
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
purple-50oklch(97.7% 0.014 308.299)#faf5ff1.07:1 fails19.57:1 passes
purple-100oklch(94.6% 0.033 307.174)#f3e8ff1.18:1 fails17.80:1 passes
purple-200oklch(90.2% 0.063 306.703)#e9d4ff1.37:1 fails15.33:1 passes
purple-300oklch(82.7% 0.119 306.383)#dab2ff1.78:1 fails11.79:1 passes
purple-400oklch(71.4% 0.203 305.504)#c27aff2.79:1 fails7.52:1 passes
purple-500oklch(62.7% 0.265 303.9)#ad46ff4.12:1 fails5.10:1 passes
purple-600oklch(55.8% 0.288 302.321)#9810fa5.54:1 passes3.79:1 fails
purple-700oklch(49.6% 0.265 301.924)#8200db7.07:1 passes2.97:1 fails
purple-800oklch(43.8% 0.218 303.724)#6e11b08.86:1 passes2.37:1 fails
purple-900oklch(38.1% 0.176 304.987)#59168b10.98:1 passes1.91:1 fails
purple-950oklch(29.1% 0.149 302.717)#3c036615.03:1 passes1.40:1 fails

Text on purple, and purple as text

For purple text the same lines hold in reverse: on white, use purple-600 or darker; on black, purple-500 or lighter. Contrast does not care which color sits behind.

The most colorful shade is purple-600, chroma 0.288; the hue moves 6.4 degrees between purple-50 and purple-950.

Of the eleven values, 5 reach beyond sRGB; for those the hex is a gamut-mapped stand-in with less chroma.

Sources