Tailwind emerald color palette
emerald-50 to emerald-950 in Tailwind v4 OKLCH, sRGB hex and the v3 hex. emerald-500 is #00BC7D in v4 and #10B981 in v3.
Every emerald shade: class, OKLCH, hex and v3 hex
| Shade | Class | v4 OKLCH | v4 hex | v3 hex | Nearest named color |
|---|---|---|---|---|---|
| emerald-50 | bg-emerald-50 | oklch(97.9% 0.021 166.113) | #ECFDF5 | #ECFDF5 | Honeydew #F0FFF0 |
| emerald-100 | bg-emerald-100 | oklch(95% 0.052 163.051) | #D0FAE5 | #D1FAE5 | Duck Egg Blue #C3FBF4 |
| emerald-200 | bg-emerald-200 | oklch(90.5% 0.093 164.15) | #A4F4CF | #A7F3D0 | Light Aqua #8CFFDB |
| emerald-300 | bg-emerald-300 | oklch(84.5% 0.143 164.978) | #5EE9B5 | #6EE7B7 | Aqua Marine #2EE8BB |
| emerald-400 | bg-emerald-400 | oklch(76.5% 0.177 163.223) | #00D492 | #34D399 | Emerald #06D6A0 |
| emerald-500 | bg-emerald-500 | oklch(69.6% 0.17 162.48) | #00BC7D | #10B981 | Dark Seafoam #1FB57A |
| emerald-600 | bg-emerald-600 | oklch(59.6% 0.145 163.225) | #009966 | #059669 | Viridian #1E9167 |
| emerald-700 | bg-emerald-700 | oklch(50.8% 0.118 165.612) | #007A55 | #047857 | Jungle Green #048243 |
| emerald-800 | bg-emerald-800 | oklch(43.2% 0.095 166.913) | #006045 | #065F46 | Spruce #0A5F38 |
| emerald-900 | bg-emerald-900 | oklch(37.8% 0.077 168.94) | #004F3B | #064E3B | Dark Blue Green #005249 |
| emerald-950 | bg-emerald-950 | oklch(26.2% 0.051 172.552) | #002C22 | #022C22 | Dark Forest Green #002D04 |
emerald contrast on white and black
WCAG AA needs 4.5:1 for body text. On white, emerald shades 700, 800, 900, 950 pass; on black, emerald shades 50, 100, 200, 300, 400, 500, 600 pass.
| Shade | Hex | On white | On black |
|---|---|---|---|
| emerald-50 | #ECFDF5 | 1.05:1 Fail | 19.93:1 AA |
| emerald-100 | #D0FAE5 | 1.13:1 Fail | 18.48:1 AA |
| emerald-200 | #A4F4CF | 1.27:1 Fail | 16.41:1 AA |
| emerald-300 | #5EE9B5 | 1.52:1 Fail | 13.79:1 AA |
| emerald-400 | #00D492 | 1.93:1 Fail | 10.83:1 AA |
| emerald-500 | #00BC7D | 2.47:1 Fail | 8.48:1 AA |
| emerald-600 | #009966 | 3.65:1 AA large | 5.74:1 AA |
| emerald-700 | #007A55 | 5.36:1 AA | 3.91:1 AA large |
| emerald-800 | #006045 | 7.61:1 AA | 2.75:1 Fail |
| emerald-900 | #004F3B | 9.62:1 AA | 2.18:1 Fail |
| emerald-950 | #002C22 | 15.18:1 AA | 1.38:1 Fail |
Use emerald in your project
Utility class: bg-emerald-500. CSS variable: var(--color-emerald-500). Override the ramp in @theme:
@import "tailwindcss";
@theme {
--color-emerald-50: oklch(97.9% 0.021 166.113);
--color-emerald-100: oklch(95% 0.052 163.051);
--color-emerald-200: oklch(90.5% 0.093 164.15);
--color-emerald-300: oklch(84.5% 0.143 164.978);
--color-emerald-400: oklch(76.5% 0.177 163.223);
--color-emerald-500: oklch(69.6% 0.17 162.48);
--color-emerald-600: oklch(59.6% 0.145 163.225);
--color-emerald-700: oklch(50.8% 0.118 165.612);
--color-emerald-800: oklch(43.2% 0.095 166.913);
--color-emerald-900: oklch(37.8% 0.077 168.94);
--color-emerald-950: oklch(26.2% 0.051 172.552);
}
More Tailwind colors
slategrayzincneutralstoneredorangeamberyellowlimegreenemeraldtealcyanskyblueindigovioletpurplefuchsiapinkrose
Build your own scale like this
Start from #00BC7D and get a custom OKLCH 50 to 950 scale with Tailwind v4 and v3 exports.