Shades of Green
← Shades generatorWhy the colour you mean by green is called lime, and what the rest are worth
Type green into CSS and you get #008000, a dark forest tone that is not what most people picture. The bright screen green they mean, #00FF00, is called lime. The cause is dull rather than deliberate: two colour lists were merged, they disagreed about green, and the HTML definition won. Everything else in the family, from olivedrab to mediumspringgreen, was inherited from the list that lost the argument. The table below keeps both, side by side, so the difference is visible rather than theoretical.
Green is also the colour the contrast formula cares about most. In the WCAG luminance calculation the green channel is weighted at about 0.72, against 0.21 for red and 0.07 for blue, because human vision is most sensitive in the middle of the spectrum. That is why lime measures only 1.4:1 against white despite looking intense, and why a green that looks dark on screen can still fail a contrast check.
Every CSS green name, with its contrast on white
The 25 named colors in the CSS keyword list that belong to this family, lightest first. The last two columns are the WCAG 2 contrast ratio against white and what that ratio passes for normal text — computed with the same function as the site's contrast checker, so the two never disagree.
| Name | HEX | RGB | On white | WCAG |
|---|---|---|---|---|
| mintcream | #f5fffa | rgb(245, 255, 250) | 1.02:1 | fails |
| honeydew | #f0fff0 | rgb(240, 255, 240) | 1.04:1 | fails |
| aquamarine | #7fffd4 | rgb(127, 255, 212) | 1.22:1 | fails |
| greenyellow | #adff2f | rgb(173, 255, 47) | 1.23:1 | fails |
| palegreen | #98fb98 | rgb(152, 251, 152) | 1.27:1 | fails |
| chartreuse | #7fff00 | rgb(127, 255, 0) | 1.30:1 | fails |
| lawngreen | #7cfc00 | rgb(124, 252, 0) | 1.33:1 | fails |
| springgreen | #00ff7f | rgb(0, 255, 127) | 1.35:1 | fails |
| lime | #00ff00 | rgb(0, 255, 0) | 1.37:1 | fails |
| mediumspringgreen | #00fa9a | rgb(0, 250, 154) | 1.39:1 | fails |
| lightgreen | #90ee90 | rgb(144, 238, 144) | 1.42:1 | fails |
| turquoise | #40e0d0 | rgb(64, 224, 208) | 1.64:1 | fails |
| yellowgreen | #9acd32 | rgb(154, 205, 50) | 1.88:1 | fails |
| mediumaquamarine | #66cdaa | rgb(102, 205, 170) | 1.93:1 | fails |
| limegreen | #32cd32 | rgb(50, 205, 50) | 2.12:1 | fails |
| darkseagreen | #8fbc8f | rgb(143, 188, 143) | 2.15:1 | fails |
| lightseagreen | #20b2aa | rgb(32, 178, 170) | 2.62:1 | fails |
| mediumseagreen | #3cb371 | rgb(60, 179, 113) | 2.67:1 | fails |
| olivedrab | #6b8e23 | rgb(107, 142, 35) | 3.81:1 | AA large |
| olive | #808000 | rgb(128, 128, 0) | 4.20:1 | AA large |
| seagreen | #2e8b57 | rgb(46, 139, 87) | 4.25:1 | AA large |
| forestgreen | #228b22 | rgb(34, 139, 34) | 4.39:1 | AA large |
| green | #008000 | rgb(0, 128, 0) | 5.14:1 | AA |
| darkolivegreen | #556b2f | rgb(85, 107, 47) | 5.95:1 | AA |
| darkgreen | #006400 | rgb(0, 100, 0) | 7.44:1 | AAA |
The green names come from grass, plants and paint tins: lawngreen, forestgreen, olivedrab, seagreen, springgreen. Consistency was never the goal. Greenyellow and yellowgreen are both here and are different colours; lawngreen and chartreuse are three units apart in two channels and read as the same colour; palegreen is lighter than lightgreen. The same merge that produced green and lime also left gray at #808080 while darkgray sits at #A9A9A9, lighter than the colour it claims to darken.
Tints, shades and tones of #228b22
Built from one base color three different ways. Tints mix it toward white, shades toward black, and tones toward grey at the same lightness — which is why the tone row goes quiet rather than dark.
Tints
Shades
Tones
The 50-950 scale
Using green in an interface
Green carries the convention for success, confirmation and go, but it should never carry it alone: red-green deficiency is the most common form of colour blindness, so a green tick and a red cross that differ only in hue are the same mark to a lot of readers. Pair the hue with a shape or a label. For text, darkgreen clears AAA at about 7.4:1, while forestgreen misses AA at roughly 4.4:1.
FAQ
- Why is green #008000 and not #00FF00?
- Because CSS inherited two conflicting definitions. The sixteen HTML colours, taken from the old VGA palette, defined green as the half-brightness #008000 and gave the full-brightness value its own name, lime. X11 called #00FF00 green. When the lists were combined, the HTML value kept the name green and X11 green became lime. Nothing about it was a design decision.
- Which CSS greens are readable as text on white?
- Not many. Darkgreen at about 7.4:1 clears AAA, darkolivegreen sits near 6:1 and green itself near 5.1:1, so those three are safe for body copy. Forestgreen misses AA at roughly 4.4:1 and seagreen at about 4.2:1. Mediumseagreen is already near 2.7:1, and lime, springgreen and lawngreen are all under 2:1, which makes them fills rather than type.
- Is olive part of the green family?
- Depends where you draw the line. Olive is #808000, exactly half of yellow, and comes from the same sixteen HTML colours as green and navy, so by hue it is a dark yellow rather than a green. Olivedrab and darkolivegreen are X11 names and do sit in the green region. Olive measures about 4.2:1 against white, just short of AA for body text.
