Green colors
30 green colors, sorted light to dark. The lightest is Pale Green at 79 percent lightness, the darkest is Dark Green at 20 percent. Each one has hex, HSL, OKLCH and the contrast it gives against white and ink black.
| Color | Hex | HSL | OKLCH | On white | On ink |
|---|---|---|---|---|---|
| Pale Green | #98FB98 | hsl(120, 93%, 79%) | oklch(90.35% 0.1624 144.09) | 1.27:1 | 15.12:1 |
| Light Green | #90EE90 | hsl(120, 73%, 75%) | oklch(86.80% 0.1558 144.09) | 1.42:1 | 13.50:1 |
| Pastel Green | #77DD77 | hsl(120, 60%, 67%) | oklch(81.18% 0.1688 143.83) | 1.69:1 | 11.29:1 |
| Inchworm | #B2EC5D | hsl(84, 79%, 65%) | oklch(87.53% 0.1820 128.35) | 1.40:1 | 13.71:1 |
| Chartreuse Green | #C6F24E | hsl(76, 86%, 63%) | oklch(90.05% 0.1913 123.30) | 1.30:1 | 14.77:1 |
| Green Yellow | #ADFF2F | hsl(84, 100%, 59%) | oklch(91.30% 0.2335 130.02) | 1.23:1 | 15.60:1 |
| Emerald | #50C878 | hsl(140, 52%, 55%) | oklch(74.51% 0.1577 151.54) | 2.13:1 | 9.00:1 |
| Artichoke | #8F9779 | hsl(76, 13%, 53%) | oklch(66.16% 0.0438 119.74) | 3.06:1 | 6.26:1 |
| Chartreuse | #7FFF00 | hsl(90, 100%, 50%) | oklch(89.03% 0.2648 136.01) | 1.30:1 | 14.77:1 |
| Yellow Green | #9ACD32 | hsl(80, 61%, 50%) | oklch(78.49% 0.1837 126.64) | 1.88:1 | 10.16:1 |
| Lime | #00FF00 | hsl(120, 100%, 50%) | oklch(86.64% 0.2948 142.50) | 1.37:1 | 13.95:1 |
| Lime Green | #32CD32 | hsl(120, 61%, 50%) | oklch(74.19% 0.2286 142.83) | 2.12:1 | 9.03:1 |
| Medium Sea Green | #3CB371 | hsl(147, 50%, 47%) | oklch(68.40% 0.1440 155.00) | 2.67:1 | 7.18:1 |
| Fern Green | #4F7942 | hsl(106, 29%, 37%) | oklch(53.09% 0.0946 138.59) | 5.07:1 | 3.78:1 |
| Olive Drab | #708238 | hsl(75, 40%, 36%) | oklch(57.54% 0.1019 121.09) | 4.25:1 | 4.50:1 |
| Sea Green | #2E8B57 | hsl(146, 50%, 36%) | oklch(56.85% 0.1187 154.95) | 4.25:1 | 4.51:1 |
| Apple Green | #8DB600 | hsl(74, 100%, 36%) | oklch(71.98% 0.1793 124.25) | 2.38:1 | 8.04:1 |
| Fern | #4B6F44 | hsl(110, 24%, 35%) | oklch(50.25% 0.0779 140.44) | 5.74:1 | 3.33:1 |
| Olive Green | #6B8E23 | hsl(80, 60%, 35%) | oklch(59.95% 0.1374 126.32) | 3.81:1 | 5.03:1 |
| Forest Green | #228B22 | hsl(120, 61%, 34%) | oklch(55.78% 0.1688 142.89) | 4.39:1 | 4.36:1 |
| Jade | #00A86B | hsl(158, 100%, 33%) | oklch(64.48% 0.1488 158.78) | 3.08:1 | 6.21:1 |
| Green Pigment | #00A550 | hsl(149, 100%, 32%) | oklch(63.17% 0.1697 151.07) | 3.23:1 | 5.92:1 |
| Shamrock Green | #009E60 | hsl(156, 100%, 31%) | oklch(61.54% 0.1462 157.11) | 3.47:1 | 5.52:1 |
| Hunter Green | #355E3B | hsl(129, 28%, 29%) | oklch(44.15% 0.0735 147.66) | 7.46:1 | 2.57:1 |
| India Green | #138808 | hsl(115, 89%, 28%) | oklch(54.52% 0.1800 142.07) | 4.61:1 | 4.15:1 |
| Green | #008000 | hsl(120, 100%, 25%) | oklch(51.98% 0.1769 142.50) | 5.14:1 | 3.72:1 |
| Olive | #808000 | hsl(60, 100%, 25%) | oklch(58.07% 0.1266 109.77) | 4.20:1 | 4.56:1 |
| Dark Olive | #4A5D23 | hsl(80, 45%, 25%) | oklch(44.88% 0.0861 124.98) | 7.29:1 | 2.63:1 |
| Pine Green | #01796F | hsl(175, 98%, 24%) | oklch(51.80% 0.0912 184.82) | 5.30:1 | 3.61:1 |
| Dark Green | #006400 | hsl(120, 100%, 20%) | oklch(43.60% 0.1484 142.50) | 7.44:1 | 2.57:1 |
Where green sits on the wheel
In HSL terms this family covers roughly 70 to 165 degrees. Green covers the widest hue range of any family here, from yellow-greens near 70 degrees to the blue-greens approaching cyan. That width means two colors both correctly called green can look unrelated side by side.
Working with green in an interface
Green carries the success and confirmation role in most interfaces. Pair it with a red or orange that differs in lightness as well as hue, so that a red-green colorblind reader can still tell your success state from your error state without reading the label. Red-green color vision deficiency is common enough that this is not an edge case.
In this set, 8 of 30 green colors clear WCAG AA for normal text on a white background, and 21 of 30 clear it as text on ink black. The most saturated is Lime at an OKLCH chroma of 0.295, the most muted is Artichoke at 0.044. If you are building a ramp, those two are the practical edges of what this family gives you.
The mistake to avoid
Mid greens sit near the middle of the luminance range, which means they fail AA against both white and black text at the same time. Check both directions before committing to a green surface.
Check any pair you are unsure about in the contrast checker, or open the contrast matrix to see which library colors pair safely with each other.
Other families
Last updated by FusionStudios. Every value on this page is computed by the same functions the tools use. How this is calculated.