RecolorOpen Recolor

Eleven shades, from emerald-50 to emerald-950

Tailwind emerald colors

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

Last updated

  1. 50#ecfdf5
  2. 100#d0fae5
  3. 200#a4f4cf
  4. 300#5ee9b5
  5. 400#00d492
  6. 500#00bc7d
  7. 600#009966
  8. 700#007a55
  9. 800#006045
  10. 900#004f3b
  11. 950#002c22
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
emerald-50oklch(97.9% 0.021 166.113)#ecfdf51.05:1 fails19.94:1 passes
emerald-100oklch(95% 0.052 163.051)#d0fae51.14:1 fails18.49:1 passes
emerald-200oklch(90.5% 0.093 164.15)#a4f4cf1.28:1 fails16.42:1 passes
emerald-300oklch(84.5% 0.143 164.978)#5ee9b51.52:1 fails13.80:1 passes
emerald-400oklch(76.5% 0.177 163.223)#00d4921.94:1 fails10.83:1 passes
emerald-500oklch(69.6% 0.17 162.48)#00bc7d2.47:1 fails8.49:1 passes
emerald-600oklch(59.6% 0.145 163.225)#0099663.65:1 fails5.75:1 passes
emerald-700oklch(50.8% 0.118 165.612)#007a555.36:1 passes3.91:1 fails
emerald-800oklch(43.2% 0.095 166.913)#0060457.61:1 passes2.76:1 fails
emerald-900oklch(37.8% 0.077 168.94)#004f3b9.63:1 passes2.18:1 fails
emerald-950oklch(26.2% 0.051 172.552)#002c2215.18:1 passes1.38:1 fails

Text on emerald, and emerald as text

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

Chroma peaks at emerald-400 (0.177) and falls toward both ends, while the hue drifts 10.1 degrees across the scale.

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

Sources