Shades of Green
Every useful green, generated rather than hand-listed.
There are 33 named CSS colors in the green family, ranging from Green Yellow (#adff2f) at the light end to Vine (#164a2a) at the dark end. The shades generated on this page all sit at hue 145° in OKLCH, so their lightness steps look evenly spaced instead of bunching up in the shadows the way an HSL ramp does.
Every shade of green on this page is generated, not copied from a list. Each swatch sits at hue 145° in OKLCH with an even perceptual lightness step, so the ramp reads smoothly instead of bunching up at the dark end the way an HSL ramp does — and nothing is clipped outside what an sRGB display can actually show.
Click any swatch to copy its hex code. The sliders let you change how many shades you get, how intense they are, and how much the hue drifts across the ramp.
Three green shades worth starting from
If you just need a green that works, these three are safe picks at the light, mid and dark ends of the range.
| Role | Hex | RGB | Contrast on white |
|---|---|---|---|
| Light green — backgrounds, tints | #c0e3c0 | rgb(192 227 192) | 1.4:1 |
| Mid green — accents, buttons | #31983d | rgb(49 152 61) | 3.69:1 |
| Dark green — text, borders | #003f0b | rgb(0 63 11) | 12.24:1 |
Named shades of green
24 named colors that fall in the green range, sorted from darkest to lightest, with the contrast ratio each one achieves against a white background. Anything below 4.5:1 is not safe for body text on white.
| Name | Hex | RGB | HSL | On white |
|---|---|---|---|---|
| Vine | #164a2a | rgb(22 74 42) | hsl(143.1 54.2% 18.8%) | 10.26:1 |
| Darkgreen | #006400 | rgb(0 100 0) | hsl(120 100% 19.6%) | 7.44:1 |
| Zucchini | #44693d | rgb(68 105 61) | hsl(110.5 26.5% 32.5%) | 6.3:1 |
| Dark Olive Green | #556b2f | rgb(85 107 47) | hsl(82 39% 30.2%) | 5.95:1 |
| Green | #008000 | rgb(0 128 0) | hsl(120 100% 25.1%) | 5.14:1 |
| Avocado | #568203 | rgb(86 130 3) | hsl(80.8 95.5% 26.1%) | 4.58:1 |
| Forest Green | #228b22 | rgb(34 139 34) | hsl(120 60.7% 33.9%) | 4.39:1 |
| Sea Green | #2e8b57 | rgb(46 139 87) | hsl(146.5 50.3% 36.3%) | 4.25:1 |
| Olive Drab | #6b8e23 | rgb(107 142 35) | hsl(79.6 60.5% 34.7%) | 3.81:1 |
| Olive Drab | #6b8e23 | rgb(107 142 35) | hsl(79.6 60.5% 34.7%) | 3.81:1 |
| Jade | #00a86b | rgb(0 168 107) | hsl(158.2 100% 32.9%) | 3.08:1 |
| Bay Leaf | #7f9a65 | rgb(127 154 101) | hsl(90.6 20.8% 50%) | 3.13:1 |
| Medium Sea Green | #3cb371 | rgb(60 179 113) | hsl(146.7 49.8% 46.9%) | 2.67:1 |
| Fern | #71bc78 | rgb(113 188 120) | hsl(125.6 35.9% 59%) | 2.29:1 |
| Lime Green | #32cd32 | rgb(50 205 50) | hsl(120 60.8% 50%) | 2.12:1 |
| Emerald | #50c878 | rgb(80 200 120) | hsl(140 52.2% 54.9%) | 2.13:1 |
| Dark Sea Green | #8fbc8f | rgb(143 188 143) | hsl(120 25.1% 64.9%) | 2.15:1 |
| Pistachio | #93c572 | rgb(147 197 114) | hsl(96.1 41.7% 61%) | 2.01:1 |
| Malachite | #0bda51 | rgb(11 218 81) | hsl(140.3 90.4% 44.9%) | 1.88:1 |
| Yellow Green | #9acd32 | rgb(154 205 50) | hsl(79.7 60.8% 50%) | 1.88:1 |
| Seafoam | #9fe2bf | rgb(159 226 191) | hsl(148.7 53.6% 75.5%) | 1.49:1 |
| Celadon | #ace1af | rgb(172 225 175) | hsl(123.4 46.9% 77.8%) | 1.48:1 |
| Teal Deer | #99e6b3 | rgb(153 230 179) | hsl(140.3 60.6% 75.1%) | 1.47:1 |
| Lime | #00ff00 | rgb(0 255 0) | hsl(120 100% 50%) | 1.37:1 |
Using green in an interface
The two badges next to each generated shade are its contrast ratio against white and against black. The first step where one of them turns green is the lightest green you can safely set body text in on that background — everything lighter is decoration, not copy.
For large areas, pick from the light end and let a darker shade of the same hue carry the text. That keeps the whole surface in one hue family, which is what makes an interface feel deliberate rather than assembled.
Frequently asked questions
What are the hex codes for shades of green?
The ramp at the top of this page generates them — click any swatch to copy it. Three reliable picks are #c0e3c0 for light, #31983d for mid and #003f0b for dark green.
What is the hex code for green?
The closest single answer is Medium Sea Green at #3cb371, but green is a range rather than one value. This page lists 24 named green shades and generates as many more as you want.
How many shades of green are there?
Effectively unlimited — an 8-bit display can show over 16 million colors, and a large share of them read as this family. The useful question is how many distinguishable steps you need, which is usually somewhere between 9 and 12 for a design system.
What colors go well with green?
Its perceptual complement sits at hue 325°, and the two neighbors either side of that make a softer split-complementary set. The palette generator builds all of them from any starting green.
Which shade of green is accessible for text?
On a white background you need 4.5:1 for body text. In the table above that is every row at or above 4.5:1 — generally the darker half of the family. The contrast checker will confirm any specific pair and suggest the nearest passing color if it fails.