Color code and palette
Shades of Green
Green connects digital products with growth, nature and positive outcomes. This collection includes pale mint, balanced emerald and deep forest values for states, dashboards and identity work.
Green
#22C55E
Color formats
The same base color in common web formats.
Shades
| Color | Name | HEX | RGB | HSL | Copy |
|---|---|---|---|---|---|
| Mint Cream | #F0FDF4 | 240, 253, 244 | 138, 76%, 97% | ||
| Mint Light | #DCFCE7 | 220, 252, 231 | 141, 84%, 93% | ||
| Mint | #BBF7D0 | 187, 247, 208 | 141, 79%, 85% | ||
| Seafoam | #86EFAC | 134, 239, 172 | 142, 77%, 73% | ||
| Spring Green | #4ADE80 | 74, 222, 128 | 142, 69%, 58% | ||
| Green | #22C55E | 34, 197, 94 | 142, 71%, 45% | ||
| Grass | #16A34A | 22, 163, 74 | 142, 76%, 36% | ||
| Forest | #15803D | 21, 128, 61 | 142, 72%, 29% | ||
| Dark Green | #166534 | 22, 101, 52 | 143, 64%, 24% | ||
| Pine | #14532D | 20, 83, 45 | 144, 61%, 20% | ||
| Emerald Light | #ECFDF5 | 236, 253, 245 | 152, 81%, 96% | ||
| Emerald Pale | #D1FAE5 | 209, 250, 229 | 149, 80%, 90% | ||
| Emerald Soft | #A7F3D0 | 167, 243, 208 | 152, 76%, 80% | ||
| Emerald | #6EE7B7 | 110, 231, 183 | 156, 72%, 67% | ||
| Jade | #34D399 | 52, 211, 153 | 158, 64%, 52% | ||
| Teal Green | #10B981 | 16, 185, 129 | 160, 84%, 39% | ||
| Sea Green | #059669 | 5, 150, 105 | 161, 94%, 30% | ||
| Ocean Green | #047857 | 4, 120, 87 | 163, 94%, 24% | ||
| Deep Green | #065F46 | 6, 95, 70 | 163, 88%, 20% | ||
| Hunter | #064E3B | 6, 78, 59 | 164, 86%, 16% |
CSS keyword: green
In CSS you can write it as the keyword green.
Text contrast
These ratios use the WCAG relative luminance formula.
Aa White text 2.28:1
Fail
Aa Black text 9.22:1
AAA
Ways to use Green
Success and confirmation states
Sustainability and wellness brands
Financial charts and dashboards
Colors that go with Green
Color-wheel harmonies built from #22C55E. Click a swatch to copy it or open the set in the color wheel.
Split complementary
Open in color wheelA base plus the two neighbors of its complement — contrast with less tension.