Shades of green
Green spans yellowish chartreuse and lime through grassy kelly green to deep forest and hunter greens, plus muted sage and olive tones. Below: 33 named shades with hex codes — tap a chip to copy it.
9 light · 16 medium · 8 dark · 8 pass AA as text on white
- Green Yellow#ADFF2F
- Pale Green#98FB98
- Chartreuse#7FFF00
- Lawn Green#7CFC00
- Spring Green#00FF7F
- Light Green#90EE90
- Medium Spring Green#00FA9A
- Lime#00FF00
- Celadon#ACE1AF
- Yellow Green#9ACD32
- Sage#BCB88A
- Pistachio#93C572
- Dark Sea Green#8FBC8F
- Emerald#50C878
- Limegreen#32CD32
- Kelly green#4CBB17
- Mint#3EB489
- Medium Sea Green#3CB371
- Moss green#8A9A5B
- Jade#00A86B
- Shamrock green#009E60
- Olive Drab#6B8E23
- Olive#808000
- Sea Green#2E8B57
- Forest Green#228B22
- Fern green#4F7942
- Green#008000
- Pine green#01796F
- Dark Olive Green#556B2F
- Hunter green#355E3B
- Dark Green#006400
- Army green#4B5320
- British racing green#004225
Green color codes: HEX, RGB, HSL, CMYK
Contrast is the WCAG 2.2 ratio of the shade as text on a white or black background (AA body text needs 4.5:1). “CSS” marks names you can type straight into CSS.
| Shade | HEX | RGB | HSL | CMYK | On white | On black |
|---|---|---|---|---|---|---|
| Green YellowCSS | #ADFF2F | rgb(173, 255, 47) | hsl(84 100% 59%) | (32%, 0%, 82%, 0%) | 1.22:1 | 17.12:1 |
| Pale GreenCSS | #98FB98 | rgb(152, 251, 152) | hsl(120 93% 79%) | (39%, 0%, 39%, 2%) | 1.26:1 | 16.58:1 |
| ChartreuseCSS | #7FFF00 | rgb(127, 255, 0) | hsl(90 100% 50%) | (50%, 0%, 100%, 0%) | 1.29:1 | 16.20:1 |
| Lawn GreenCSS | #7CFC00 | rgb(124, 252, 0) | hsl(90 100% 49%) | (51%, 0%, 100%, 1%) | 1.33:1 | 15.78:1 |
| Spring GreenCSS | #00FF7F | rgb(0, 255, 127) | hsl(150 100% 50%) | (100%, 0%, 50%, 0%) | 1.34:1 | 15.61:1 |
| Light GreenCSS | #90EE90 | rgb(144, 238, 144) | hsl(120 73% 75%) | (39%, 0%, 39%, 7%) | 1.41:1 | 14.81:1 |
| Medium Spring GreenCSS | #00FA9A | rgb(0, 250, 154) | hsl(157 100% 49%) | (100%, 0%, 38%, 2%) | 1.38:1 | 15.14:1 |
| LimeCSS | #00FF00 | rgb(0, 255, 0) | hsl(120 100% 50%) | (100%, 0%, 100%, 0%) | 1.37:1 | 15.30:1 |
| Celadon | #ACE1AF | rgb(172, 225, 175) | hsl(123 47% 78%) | (24%, 0%, 22%, 12%) | 1.48:1 | 14.14:1 |
| Yellow GreenCSS | #9ACD32 | rgb(154, 205, 50) | hsl(80 61% 50%) | (25%, 0%, 76%, 20%) | 1.88:1 | 11.15:1 |
| Sage | #BCB88A | rgb(188, 184, 138) | hsl(55 27% 64%) | (0%, 2%, 27%, 26%) | 2.02:1 | 10.36:1 |
| Pistachio | #93C572 | rgb(147, 197, 114) | hsl(96 42% 61%) | (25%, 0%, 42%, 23%) | 2.00:1 | 10.47:1 |
| Dark Sea GreenCSS | #8FBC8F | rgb(143, 188, 143) | hsl(120 25% 65%) | (24%, 0%, 24%, 26%) | 2.15:1 | 9.75:1 |
| Emerald | #50C878 | rgb(80, 200, 120) | hsl(140 52% 55%) | (60%, 0%, 40%, 22%) | 2.12:1 | 9.87:1 |
| LimegreenCSS | #32CD32 | rgb(50, 205, 50) | hsl(120 61% 50%) | (76%, 0%, 76%, 20%) | 2.11:1 | 9.91:1 |
| Kelly green | #4CBB17 | rgb(76, 187, 23) | hsl(101 78% 41%) | (59%, 0%, 88%, 27%) | 2.49:1 | 8.42:1 |
| Mint | #3EB489 | rgb(62, 180, 137) | hsl(158 49% 47%) | (66%, 0%, 24%, 29%) | 2.59:1 | 8.09:1 |
| Medium Sea GreenCSS | #3CB371 | rgb(60, 179, 113) | hsl(147 50% 47%) | (66%, 0%, 37%, 30%) | 2.66:1 | 7.87:1 |
| Moss green | #8A9A5B | rgb(138, 154, 91) | hsl(75 26% 48%) | (10%, 0%, 41%, 40%) | 3.06:1 | 6.85:1 |
| Jade | #00A86B | rgb(0, 168, 107) | hsl(158 100% 33%) | (100%, 0%, 36%, 34%) | 3.08:1 | 6.81:1 |
| Shamrock green | #009E60 | rgb(0, 158, 96) | hsl(156 100% 31%) | (100%, 0%, 39%, 38%) | 3.46:1 | 6.05:1 |
| Olive DrabCSS | #6B8E23 | rgb(107, 142, 35) | hsl(80 60% 35%) | (25%, 0%, 75%, 44%) | 3.80:1 | 5.51:1 |
| OliveCSS | #808000 | rgb(128, 128, 0) | hsl(60 100% 25%) | (0%, 0%, 100%, 50%) | 4.19:1 | 5.00:1 |
| Sea GreenCSS | #2E8B57 | rgb(46, 139, 87) | hsl(146 50% 36%) | (67%, 0%, 37%, 45%) | 4.24:1 | 4.94:1 |
| Forest GreenCSS | #228B22 | rgb(34, 139, 34) | hsl(120 61% 34%) | (76%, 0%, 76%, 45%) | 4.38:1 | 4.78:1 |
| Fern green | #4F7942 | rgb(79, 121, 66) | hsl(106 29% 37%) | (35%, 0%, 45%, 53%) | 5.06:1 | 4.14:1 |
| GreenCSS | #008000 | rgb(0, 128, 0) | hsl(120 100% 25%) | (100%, 0%, 100%, 50%) | 5.13:1 | 4.08:1 |
| Pine green | #01796F | rgb(1, 121, 111) | hsl(175 98% 24%) | (99%, 0%, 8%, 53%) | 5.29:1 | 3.96:1 |
| Dark Olive GreenCSS | #556B2F | rgb(85, 107, 47) | hsl(82 39% 30%) | (21%, 0%, 56%, 58%) | 5.94:1 | 3.53:1 |
| Hunter green | #355E3B | rgb(53, 94, 59) | hsl(129 28% 29%) | (44%, 0%, 37%, 63%) | 7.45:1 | 2.81:1 |
| Dark GreenCSS | #006400 | rgb(0, 100, 0) | hsl(120 100% 20%) | (100%, 0%, 100%, 61%) | 7.43:1 | 2.82:1 |
| Army green | #4B5320 | rgb(75, 83, 32) | hsl(69 44% 23%) | (10%, 0%, 61%, 67%) | 8.21:1 | 2.55:1 |
| British racing green | #004225 | rgb(0, 66, 37) | hsl(154 100% 13%) | (100%, 0%, 44%, 74%) | 11.62:1 | 1.80:1 |
Make your own shades of green
Pick any green and get an evenly stepped 50–950 scale built in OKLCH, so each step looks evenly lighter or darker. Your exact color stays at its natural step.
Using green in design
Green signals success and “go” in UI, and suits health, finance and outdoor brands. Bright greens are light: most fail as text on white, so use darker shades for type.
To pair it with other hues, start from the color wheel or see colors that go with green. Check text and background pairs in the WCAG contrast checker, and drop a shade into the palette generator to build a full scheme around it.
Sources: CSS named colors from the W3C CSS Color Module Level 4; other names and hex values as commonly listed in Wikipedia’s color articles. Names for the same color vary between sources.
Frequently asked questions
How many shades of green are there?
There is no fixed number: screens can show millions of colors and any green hue can be made lighter, darker or more muted. This page lists 33 named shades of green — the CSS named colors that fall in the green family plus widely used names such as emerald, jade, sage.
What is the hex code for green?
There is no single official green. The CSS keyword "green" is #008000; designers often use other values. Click any swatch on this page to copy its hex code.
What is the lightest and the darkest shade of green?
In this list the lightest is Green Yellow (#ADFF2F) and the darkest is British racing green (#004225), measured by OKLCH lightness, which tracks how bright a color actually looks.
Which shades of green are readable as text on white?
8 of the 33 shades reach the WCAG AA ratio of 4.5:1 on white, for example Dark Green (#006400), Army green (#4B5320), British racing green (#004225). Use the "On white" column in the table, or check any pair in the contrast checker.
What colors go with green?
See the palettes on our "colors that go with green" page: complementary, analogous and neutral pairings with hex codes.
What is the difference between a shade, a tint and a tone of green?
Strictly, a shade is a color mixed with black, a tint is mixed with white and a tone is mixed with gray. In everyday use "shades of green" means every variation of the hue, which is how this page uses it.