RecolorOpen Recolor

Eleven shades, from yellow-50 to yellow-950

Tailwind yellow colors

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

Last updated

  1. 50#fefce8
  2. 100#fef9c2
  3. 200#fff085
  4. 300#ffdf20
  5. 400#fcc800
  6. 500#efb100
  7. 600#d08700
  8. 700#a65f00
  9. 800#894b00
  10. 900#733e0a
  11. 950#432004
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
yellow-50oklch(98.7% 0.026 102.212)#fefce81.03:1 fails20.30:1 passes
yellow-100oklch(97.3% 0.071 103.193)#fef9c21.07:1 fails19.54:1 passes
yellow-200oklch(94.5% 0.129 101.54)#fff0851.16:1 fails18.05:1 passes
yellow-300oklch(90.5% 0.182 98.111)#ffdf201.33:1 fails15.83:1 passes
yellow-400oklch(85.2% 0.199 91.936)#fcc8001.57:1 fails13.40:1 passes
yellow-500oklch(79.5% 0.184 86.047)#efb1001.92:1 fails10.96:1 passes
yellow-600oklch(68.1% 0.162 75.834)#d087002.94:1 fails7.15:1 passes
yellow-700oklch(55.4% 0.135 66.442)#a65f004.93:1 passes4.26:1 fails
yellow-800oklch(47.6% 0.114 61.907)#894b006.84:1 passes3.07:1 fails
yellow-900oklch(42.1% 0.095 57.708)#733e0a8.67:1 passes2.42:1 fails
yellow-950oklch(28.6% 0.066 53.813)#43200414.51:1 passes1.45:1 fails

Text on yellow, and yellow as text

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

The most colorful shade is yellow-400, chroma 0.199; the hue moves 49.4 degrees between yellow-50 and yellow-950.

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

Sources