Shades of Green: Names, HEX & RGB Codes
Green runs from yellow-greens like chartreuse to blue-greens like teal. Here are the CSS named greens with exact HEX, RGB and HSL values, sorted from light to dark.
23 named green colors in CSS
Every name below works directly in CSS (for example color: lawngreen;). Values are from the CSS Color Module Level 4 list; the last column shows whether white or black text has more contrast on that color, and the exact WCAG ratio.
| Name | HEX | RGB | HSL | Best text color | |
|---|---|---|---|---|---|
Honeydewhoneydew | #F0FFF0 | rgb(240, 255, 240) | hsl(120, 100%, 97%) | black text, 20.26:1 | |
Pale Greenpalegreen | #98FB98 | rgb(152, 251, 152) | hsl(120, 93%, 79%) | black text, 16.58:1 | |
Light Greenlightgreen | #90EE90 | rgb(144, 238, 144) | hsl(120, 73%, 75%) | black text, 14.81:1 | |
Dark Sea Greendarkseagreen | #8FBC8F | rgb(143, 188, 143) | hsl(120, 25%, 65%) | black text, 9.75:1 | |
Medium Aquamarinemediumaquamarine | #66CDAA | rgb(102, 205, 170) | hsl(160, 51%, 60%) | black text, 10.87:1 | |
Green Yellowgreenyellow | #ADFF2F | rgb(173, 255, 47) | hsl(84, 100%, 59%) | black text, 17.12:1 | |
Chartreusechartreuse | #7FFF00 | rgb(127, 255, 0) | hsl(90, 100%, 50%) | black text, 16.20:1 | |
Limelime | #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) | black text, 15.30:1 | |
Spring Greenspringgreen | #00FF7F | rgb(0, 255, 127) | hsl(150, 100%, 50%) | black text, 15.61:1 | |
Yellow Greenyellowgreen | #9ACD32 | rgb(154, 205, 50) | hsl(80, 61%, 50%) | black text, 11.15:1 | |
Lime Greenlimegreen | #32CD32 | rgb(50, 205, 50) | hsl(120, 61%, 50%) | black text, 9.91:1 | |
Lawn Greenlawngreen | #7CFC00 | rgb(124, 252, 0) | hsl(90, 100%, 49%) | black text, 15.78:1 | |
Medium Spring Greenmediumspringgreen | #00FA9A | rgb(0, 250, 154) | hsl(157, 100%, 49%) | black text, 15.14:1 | |
Medium Sea Greenmediumseagreen | #3CB371 | rgb(60, 179, 113) | hsl(147, 50%, 47%) | black text, 7.87:1 | |
Light Sea Greenlightseagreen | #20B2AA | rgb(32, 178, 170) | hsl(177, 70%, 41%) | black text, 8.01:1 | |
Sea Greenseagreen | #2E8B57 | rgb(46, 139, 87) | hsl(146, 50%, 36%) | black text, 4.94:1 | |
Olive Drabolivedrab | #6B8E23 | rgb(107, 142, 35) | hsl(80, 60%, 35%) | black text, 5.51:1 | |
Forest Greenforestgreen | #228B22 | rgb(34, 139, 34) | hsl(120, 61%, 34%) | black text, 4.78:1 | |
Dark Olive Greendarkolivegreen | #556B2F | rgb(85, 107, 47) | hsl(82, 39%, 30%) | white text, 5.94:1 | |
Greengreen | #008000 | rgb(0, 128, 0) | hsl(120, 100%, 25%) | white text, 5.13:1 | |
Oliveolive | #808000 | rgb(128, 128, 0) | hsl(60, 100%, 25%) | black text, 5.00:1 | |
Tealteal | #008080 | rgb(0, 128, 128) | hsl(180, 100%, 25%) | white text, 4.77:1 | |
Dark Greendarkgreen | #006400 | rgb(0, 100, 0) | hsl(120, 100%, 20%) | white text, 7.43:1 |
Green tint & shade scale
A ten-step scale built from seagreen (#2E8B57). Need a scale for your own color? Use the tints, shades & tones generator.
Tints (mixed with white) on the left, shades (mixed with black) on the right. Click a swatch to copy it.
Using green in design
Green is the conventional color for success states and "go". Bright greens such as lime (#00FF00) are far too light for text on white; green (#008000) reaches 5.13:1 and works for text, and darkgreen (#006400) is safer still. Because red and green are the classic pair confused in color blindness, always pair a green success state with an icon or label.
A palette to start from
More ideas: organic food palettes, earth tones in design, or check any pair in the contrast checker.