RecolorOpen Recolor

Eleven shades, from orange-50 to orange-950

Tailwind orange colors

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

Last updated

  1. 50#fff7ed
  2. 100#ffedd4
  3. 200#ffd6a7
  4. 300#ffb86a
  5. 400#ff8904
  6. 500#ff6900
  7. 600#f54a00
  8. 700#ca3500
  9. 800#9f2d00
  10. 900#7e2a0c
  11. 950#441306
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
orange-50oklch(98% 0.016 73.684)#fff7ed1.06:1 fails19.78:1 passes
orange-100oklch(95.4% 0.038 75.164)#ffedd41.15:1 fails18.32:1 passes
orange-200oklch(90.1% 0.076 70.697)#ffd6a71.36:1 fails15.43:1 passes
orange-300oklch(83.7% 0.128 66.29)#ffb86a1.71:1 fails12.32:1 passes
orange-400oklch(75% 0.183 55.934)#ff89042.38:1 fails8.83:1 passes
orange-500oklch(70.5% 0.213 47.604)#ff69002.89:1 fails7.27:1 passes
orange-600oklch(64.6% 0.222 41.116)#f54a003.58:1 fails5.86:1 passes
orange-700oklch(55.3% 0.195 38.402)#ca35005.22:1 passes4.02:1 fails
orange-800oklch(47% 0.157 37.304)#9f2d007.37:1 passes2.85:1 fails
orange-900oklch(40.8% 0.123 38.172)#7e2a0c9.44:1 passes2.22:1 fails
orange-950oklch(26.6% 0.079 36.259)#44130615.65:1 passes1.34:1 fails

Text on orange, and orange as text

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

The most colorful shade is orange-600, chroma 0.222; the hue moves 38.9 degrees between orange-50 and orange-950.

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

Sources