RecolorOpen Recolor

Eleven shades, from red-50 to red-950

Tailwind red colors

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

Last updated

  1. 50#fef2f2
  2. 100#ffe2e2
  3. 200#ffc9c9
  4. 300#ffa2a2
  5. 400#ff6467
  6. 500#fb2c36
  7. 600#e7000b
  8. 700#c10007
  9. 800#9f0712
  10. 900#82181a
  11. 950#460809
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
red-50oklch(97.1% 0.013 17.38)#fef2f21.09:1 fails19.20:1 passes
red-100oklch(93.6% 0.032 17.717)#ffe2e21.22:1 fails17.23:1 passes
red-200oklch(88.5% 0.062 18.334)#ffc9c91.45:1 fails14.45:1 passes
red-300oklch(80.8% 0.114 19.571)#ffa2a21.92:1 fails10.94:1 passes
red-400oklch(70.4% 0.191 22.216)#ff64672.89:1 fails7.27:1 passes
red-500oklch(63.7% 0.237 25.331)#fb2c363.81:1 fails5.52:1 passes
red-600oklch(57.7% 0.245 27.325)#e7000b4.77:1 passes4.40:1 fails
red-700oklch(50.5% 0.213 27.518)#c100076.42:1 passes3.27:1 fails
red-800oklch(44.4% 0.177 26.899)#9f07128.36:1 passes2.51:1 fails
red-900oklch(39.6% 0.141 25.723)#82181a10.03:1 passes2.09:1 fails
red-950oklch(25.8% 0.092 26.042)#46080916.17:1 passes1.30:1 fails

Text on red, and red as text

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

Chroma peaks at red-600 (0.245) and falls toward both ends, while the hue drifts 10.1 degrees across the scale.

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

Sources