Sage Green Color Palette
Calm, grey-green sage from pale mist to deep forest shade, with a warm linen white. Sage green is restful without being dull, which is why it works in bedrooms, kitchens and wedding stationery alike.
Click any color to copy its HEX code.
Sage Green color codes
| Name | HEX | RGB | HSL | |
|---|---|---|---|---|
| Linen | #F4EFE6 | 244, 239, 230 | 39°, 39%, 93% | |
| Sage Mist | #E3E8DA | 227, 232, 218 | 81°, 23%, 88% | |
| Soft Sage | #C4CFB4 | 196, 207, 180 | 84°, 22%, 76% | |
| Sage | #9CAF88 | 156, 175, 136 | 89°, 20%, 61% | |
| Olive Sage | #6F7F5A | 111, 127, 90 | 86°, 17%, 43% | |
| Forest Shadow | #3E4A35 | 62, 74, 53 | 94°, 17%, 25% |
How to use this palette
A simple way to use 6 colors without chaos is the 60-30-10 rule: about 60% of the space in the lightest shade, 30% in a supporting color and 10% in the accent. For this palette that is Linen (#F4EFE6) as the base, Sage Mist (#E3E8DA) as the supporting color and Sage (#9CAF88) as the accent, with Forest Shadow (#3E4A35) for text and fine details.
Sage Green
A quick preview of the palette with base, text and accent colors.
Sage Sage MistWhere it works
Readable text color pairs
These combinations reach a contrast ratio of at least 4.5:1, the WCAG AA level for normal text, so they are safe for text on websites, posters and invitations.
- Forest Shadow on Linen#3E4A35 on #F4EFE6 · 8.2:1
- Forest Shadow on Sage Mist#3E4A35 on #E3E8DA · 7.5:1
- Forest Shadow on Soft Sage#3E4A35 on #C4CFB4 · 5.8:1
CSS variables
:root {
--linen: #F4EFE6;
--sage-mist: #E3E8DA;
--soft-sage: #C4CFB4;
--sage: #9CAF88;
--olive-sage: #6F7F5A;
--forest-shadow: #3E4A35;
}