RecolorOpen Recolor

Eleven shades, from mauve-50 to mauve-950

Tailwind mauve colors

Tailwind CSS 4.3.3 defines eleven mauve shades in OKLCH, from mauve-50 (#fafafa) to mauve-950 (#0c090c). On them white text passes WCAG AA from mauve-500 to mauve-950, and black text from mauve-50 to mauve-400. Recolor (recolor.page) shows the scale on a real page.

Last updated

  1. 50#fafafa
  2. 100#f3f1f3
  3. 200#e7e4e7
  4. 300#d7d0d7
  5. 400#a89ea9
  6. 500#79697b
  7. 600#594c5b
  8. 700#463947
  9. 800#2a212c
  10. 900#1d161e
  11. 950#0c090c
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
mauve-50oklch(98.5% 0 none)#fafafa1.04:1 fails20.12:1 passes
mauve-100oklch(96% 0.003 325.6)#f3f1f31.12:1 fails18.69:1 passes
mauve-200oklch(92.2% 0.005 325.62)#e7e4e71.26:1 fails16.65:1 passes
mauve-300oklch(86.5% 0.012 325.68)#d7d0d71.51:1 fails13.89:1 passes
mauve-400oklch(71.1% 0.019 323.02)#a89ea92.58:1 fails8.13:1 passes
mauve-500oklch(54.2% 0.034 322.5)#79697b5.10:1 passes4.12:1 fails
mauve-600oklch(43.5% 0.029 321.78)#594c5b8.05:1 passes2.61:1 fails
mauve-700oklch(36.4% 0.029 323.89)#46394710.84:1 passes1.94:1 fails
mauve-800oklch(26.3% 0.024 320.12)#2a212c15.53:1 passes1.35:1 fails
mauve-900oklch(21.2% 0.019 322.12)#1d161e17.71:1 passes1.19:1 fails
mauve-950oklch(14.5% 0.008 326)#0c090c19.81:1 passes1.06:1 fails

Text on mauve, and mauve as text

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

It is one of Tailwind's nine grays: its chroma stays at or under 0.034, with a hint of magenta.

All eleven fit inside sRGB, so every hex code here is exact.

Sources