Tailwind green color palette
green-50 to green-950 in Tailwind v4 OKLCH, sRGB hex and the v3 hex. green-500 is #00C950 in v4 and #22C55E in v3.
Every green shade: class, OKLCH, hex and v3 hex
| Shade | Class | v4 OKLCH | v4 hex | v3 hex | Nearest named color |
|---|---|---|---|---|---|
| green-50 | bg-green-50 | oklch(98.2% 0.018 155.826) | #F0FDF4 | #F0FDF4 | Honeydew #F0FFF0 |
| green-100 | bg-green-100 | oklch(96.2% 0.044 156.743) | #DCFCE7 | #DCFCE7 | Ice #D6FFFA |
| green-200 | bg-green-200 | oklch(92.5% 0.084 155.995) | #B9F8CF | #BBF7D0 | Pale Aqua #B8FFEB |
| green-300 | bg-green-300 | oklch(87.1% 0.15 154.449) | #7BF1A8 | #86EFAC | Seafoam Green #7AF9AB |
| green-400 | bg-green-400 | oklch(79.2% 0.209 151.711) | #05DF72 | #4ADE80 | Weird Green #3AE57F |
| green-500 | bg-green-500 | oklch(72.3% 0.219 149.579) | #00C950 | #22C55E | Shamrock Green #02C14D |
| green-600 | bg-green-600 | oklch(62.7% 0.194 149.214) | #00A63E | #16A34A | Kelly Green #02AB2E |
| green-700 | bg-green-700 | oklch(52.7% 0.154 150.069) | #008236 | #15803D | Jungle Green #048243 |
| green-800 | bg-green-800 | oklch(44.8% 0.119 151.328) | #016630 | #166534 | Spruce #0A5F38 |
| green-900 | bg-green-900 | oklch(39.3% 0.095 152.535) | #0D542B | #14532D | Forest #0B5509 |
| green-950 | bg-green-950 | oklch(26.6% 0.065 152.934) | #032E15 | #052E16 | Dark Forest Green #002D04 |
green contrast on white and black
WCAG AA needs 4.5:1 for body text. On white, green shades 700, 800, 900, 950 pass; on black, green shades 50, 100, 200, 300, 400, 500, 600 pass.
| Shade | Hex | On white | On black |
|---|---|---|---|
| green-50 | #F0FDF4 | 1.04:1 Fail | 20.06:1 AA |
| green-100 | #DCFCE7 | 1.09:1 Fail | 19.12:1 AA |
| green-200 | #B9F8CF | 1.20:1 Fail | 17.39:1 AA |
| green-300 | #7BF1A8 | 1.40:1 Fail | 14.98:1 AA |
| green-400 | #05DF72 | 1.77:1 Fail | 11.80:1 AA |
| green-500 | #00C950 | 2.21:1 Fail | 9.47:1 AA |
| green-600 | #00A63E | 3.21:1 AA large | 6.52:1 AA |
| green-700 | #008236 | 4.94:1 AA | 4.24:1 AA large |
| green-800 | #016630 | 7.13:1 AA | 2.94:1 Fail |
| green-900 | #0D542B | 9.05:1 AA | 2.32:1 Fail |
| green-950 | #032E15 | 14.94:1 AA | 1.40:1 Fail |
Use green in your project
Utility class: bg-green-500. CSS variable: var(--color-green-500). Override the ramp in @theme:
@import "tailwindcss";
@theme {
--color-green-50: oklch(98.2% 0.018 155.826);
--color-green-100: oklch(96.2% 0.044 156.743);
--color-green-200: oklch(92.5% 0.084 155.995);
--color-green-300: oklch(87.1% 0.15 154.449);
--color-green-400: oklch(79.2% 0.209 151.711);
--color-green-500: oklch(72.3% 0.219 149.579);
--color-green-600: oklch(62.7% 0.194 149.214);
--color-green-700: oklch(52.7% 0.154 150.069);
--color-green-800: oklch(44.8% 0.119 151.328);
--color-green-900: oklch(39.3% 0.095 152.535);
--color-green-950: oklch(26.6% 0.065 152.934);
}
More Tailwind colors
Previous: lime | Next: emerald
slategrayzincneutralstoneredorangeamberyellowlimegreenemeraldtealcyanskyblueindigovioletpurplefuchsiapinkrose
Build your own scale like this
Start from #00C950 and get a custom OKLCH 50 to 950 scale with Tailwind v4 and v3 exports.