Green Colors
Every shade of green in one reference — from soft mint and sage to emerald and forest. Each color is shown with HEX, RGB and HSL values you can copy in one click.
Green color reference
A systematic green scale with hex, RGB and HSL values. Click any row to copy the hex code.
| Name | HEX | RGB | HSL | |
|---|---|---|---|---|
| Green 100 | #DCFCE7 |
220, 252, 231 | 141°, 84%, 93% | |
| Green 200 | #BBF7D0 |
187, 247, 208 | 141°, 79%, 85% | |
| Green 300 | #86EFAC |
134, 239, 172 | 142°, 77%, 73% | |
| Green 400 | #4ADE80 |
74, 222, 128 | 142°, 69%, 58% | |
| Green 500 | #22C55E |
34, 197, 94 | 142°, 71%, 45% | |
| Green 600 | #16A34A |
22, 163, 74 | 142°, 76%, 36% | |
| Green 700 | #15803D |
21, 128, 61 | 142°, 72%, 29% | |
| Green 800 | #166534 |
22, 101, 52 | 143°, 64%, 24% | |
| Green 900 | #14532D |
20, 83, 45 | 144°, 61%, 20% | |
| Green 950 | #052E16 |
5, 46, 22 | 145°, 80%, 10% |
Named greens
Common named greens from CSS and design practice.
Complementary and harmonious colors
Green sits at 120° on the color wheel. Here are the relationships that pair well with green.
| Relationship | Angle | Example hue |
|---|---|---|
| Complementary | 180° | Red |
| Split-complementary | 150° / 210° | Magenta / Orange |
| Triadic | 120° / 240° | Blue / Red |
| Analogous | −30° / +30° | Yellow-green / Cyan |
Green in design and accessibility
Green carries strong associations with nature, growth, health and success. It is the default color for "confirm" and "success" states in most interfaces, the anchor hue for eco, wellness and finance brands, and the second most common color in data visualization after blue.
Common uses in interfaces
- Success and confirmation — form saves, checkmarks, order confirmations.
- Health and wellness — medical, fitness, nutrition, organic.
- Finance and sustainability — banking, ESG, green energy.
- Data visualization — category colors and progress indicators.
Accessibility notes
Green’s contrast on white varies massively with lightness. Light greens fail AA on white; dark greens pass AAA. Never rely on green alone for status — pair it with an icon, label or pattern. Red-green color vision deficiency affects roughly 8% of men, and green success states are one of the most common accessibility failures in interfaces.
Frequently asked questions
What is the purest green hex code?
Pure green is #00FF00 — RGB (0, 255, 0). It is rarely used in design because its very high luminance makes it feel fluorescent. Most production designs use a darker or softer green such as #22C55E (mid) or #166534 (deep).
What colors go well with green?
Neutral browns, creams, dark grays and off-whites form a natural pairing. Analogous partners — yellow-green and cyan — create a cohesive, calming palette. For contrast, its complementary is red, but the combination should be used carefully because it is hard to distinguish for users with red-green color vision deficiency.
What is the complementary color of green?
Red. Green sits at 120° and red at 0° (or 360°), making them opposites. Split-complementary partners are magenta and orange. In practice, deep green with muted terracotta feels more refined than a full-saturation red-and-green pair.
Is green accessible for text?
Green’s contrast depends entirely on lightness. On white: #22C55E reaches about 1.9:1 (fails), #16A34A reaches about 3.4:1 (AA Large only), and #166534 reaches about 6.5:1 (AA). For body copy, always use a dark green, or reverse the pairing — light green on a dark surface.
How do I generate a full green scale?
Use our shades generator. Enter any green as the base and it produces an 11-step 50–950 scale ready for CSS variables or Tailwind configs.