RecolorOpen Recolor

Eleven shades, from rose-50 to rose-950

Tailwind rose colors

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

Last updated

  1. 50#fff1f2
  2. 100#ffe4e6
  3. 200#ffccd3
  4. 300#ffa1ad
  5. 400#ff637e
  6. 500#ff2056
  7. 600#ec003f
  8. 700#c70036
  9. 800#a50036
  10. 900#8b0836
  11. 950#4d0218
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
rose-50oklch(96.9% 0.015 12.422)#fff1f21.10:1 fails19.12:1 passes
rose-100oklch(94.1% 0.03 12.58)#ffe4e61.20:1 fails17.49:1 passes
rose-200oklch(89.2% 0.058 10.001)#ffccd31.42:1 fails14.83:1 passes
rose-300oklch(81% 0.117 11.638)#ffa1ad1.92:1 fails10.95:1 passes
rose-400oklch(71.2% 0.194 13.428)#ff637e2.86:1 fails7.34:1 passes
rose-500oklch(64.5% 0.246 16.439)#ff20563.75:1 fails5.59:1 passes
rose-600oklch(58.6% 0.253 17.585)#ec003f4.53:1 passes4.64:1 passes
rose-700oklch(51.4% 0.222 16.935)#c700366.03:1 passes3.48:1 fails
rose-800oklch(45.5% 0.188 13.697)#a500367.92:1 passes2.65:1 fails
rose-900oklch(41% 0.159 10.272)#8b08369.61:1 passes2.19:1 fails
rose-950oklch(27.1% 0.105 12.094)#4d021815.70:1 passes1.34:1 fails

Text on rose, and rose as text

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

Chroma peaks at rose-600 (0.253) and falls toward both ends, while the hue drifts 7.6 degrees across the scale.

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

Sources