RecolorOpen Recolor

Eleven shades, from pink-50 to pink-950

Tailwind pink colors

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

Last updated

  1. 50#fdf2f8
  2. 100#fce7f3
  3. 200#fccee8
  4. 300#fda5d5
  5. 400#fb64b6
  6. 500#f6339a
  7. 600#e60076
  8. 700#c6005c
  9. 800#a3004c
  10. 900#861043
  11. 950#510424
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
pink-50oklch(97.1% 0.014 343.198)#fdf2f81.09:1 fails19.23:1 passes
pink-100oklch(94.8% 0.028 342.258)#fce7f31.18:1 fails17.86:1 passes
pink-200oklch(89.9% 0.061 343.231)#fccee81.39:1 fails15.13:1 passes
pink-300oklch(82.3% 0.12 346.018)#fda5d51.82:1 fails11.52:1 passes
pink-400oklch(71.8% 0.202 349.761)#fb64b62.76:1 fails7.60:1 passes
pink-500oklch(65.6% 0.241 354.308)#f6339a3.58:1 fails5.86:1 passes
pink-600oklch(59.2% 0.249 0.584)#e600764.54:1 passes4.63:1 passes
pink-700oklch(52.5% 0.223 3.958)#c6005c5.91:1 passes3.56:1 fails
pink-800oklch(45.9% 0.187 3.815)#a3004c7.89:1 passes2.66:1 fails
pink-900oklch(40.8% 0.153 2.432)#8610439.68:1 passes2.17:1 fails
pink-950oklch(28.4% 0.109 3.907)#51042415.08:1 passes1.39:1 fails

Text on pink, and pink as text

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

The most colorful shade is pink-600, chroma 0.249; the hue moves 353.7 degrees between pink-50 and pink-950.

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

Sources