RecolorOpen Recolor

Eleven shades, from green-50 to green-950

Tailwind green colors

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

Last updated

  1. 50#f0fdf4
  2. 100#dcfce7
  3. 200#b9f8cf
  4. 300#7bf1a8
  5. 400#05df72
  6. 500#00c951
  7. 600#00a63e
  8. 700#008236
  9. 800#016630
  10. 900#0d542b
  11. 950#032e15
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
green-50oklch(98.2% 0.018 155.826)#f0fdf41.05:1 fails20.06:1 passes
green-100oklch(96.2% 0.044 156.743)#dcfce71.10:1 fails19.12:1 passes
green-200oklch(92.5% 0.084 155.995)#b9f8cf1.21:1 fails17.39:1 passes
green-300oklch(87.1% 0.15 154.449)#7bf1a81.40:1 fails14.99:1 passes
green-400oklch(79.2% 0.209 151.711)#05df721.78:1 fails11.80:1 passes
green-500oklch(72.3% 0.219 149.579)#00c9512.22:1 fails9.47:1 passes
green-600oklch(62.7% 0.194 149.214)#00a63e3.22:1 fails6.52:1 passes
green-700oklch(52.7% 0.154 150.069)#0082364.95:1 passes4.25:1 fails
green-800oklch(44.8% 0.119 151.328)#0166307.13:1 passes2.94:1 fails
green-900oklch(39.3% 0.095 152.535)#0d542b9.05:1 passes2.32:1 fails
green-950oklch(26.6% 0.065 152.934)#032e1514.94:1 passes1.41:1 fails

Text on green, and green as text

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

The most colorful shade is green-500, chroma 0.219; the hue moves 7.5 degrees between green-50 and green-950.

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

Sources