#F1F4EA Curated color palette
Sage Green Color Palette
A muted sage-green palette with warm off-white, pale sage, dusty mid tones, and a deep herbal anchor.
“Sage green” is not one standardized digital color; this is a deliberately curated family.
Palette colors
#DDE5D2 #B7C4A3 #8FA27A #53634A Each swatch chooses black or white label text using the higher WCAG contrast ratio for that single solid color. Final component contrast still depends on your actual text size and context.
Suggested use
Works well for calm editorial layouts, wellness, interiors, botanical themes, and muted UI systems that need green without strong saturation.
Surface Sage Green Color Palette Example action
CSS variables
:root {
--palette-1: #F1F4EA;
--palette-2: #DDE5D2;
--palette-3: #B7C4A3;
--palette-4: #8FA27A;
--palette-5: #53634A;
}Contrast snapshot
Warm Mist
#F1F4EA Best of black/white: 18.87:1 Pale Sage
#DDE5D2 Best of black/white: 16.21:1 Sage
#B7C4A3 Best of black/white: 11.44:1 Herb
#8FA27A Best of black/white: 7.62:1 Deep Sage
#53634A Best of black/white: 6.46:1 This is a quick black/white text comparison, not a full accessibility audit. Use the Contrast Checker for the exact foreground/background pair you plan to ship.
More Sage Green palette directions
Pale sage
Airier low-contrast botanical direction.
#F7F8F2#E9EEDF#CFD9C2#A8B79A#5F7055 Warm sage
Sage mixed with beige and olive warmth.
#F4EFE4#D4D0B0#A8B08D#7D8764#4F5840 Cool sage
Slight blue-gray bias for restrained interfaces.
#F1F5F1#D8E2DA#A6B8A9#758B7B#46584C Related palettes
Calm Violet UI Palette
A restrained violet interface palette with neutral surfaces, a soft supporting violet, and a strong primary action color.
Green Color Palette
A balanced green palette with pale surfaces, fresh mids, a forest accent, and a deep green neutral.
Pastel Color Palette
A soft five-color pastel palette with pink, peach, green, blue, and lavender tones.
Blue Color Palette
A blue palette moving from a near-white cool surface through a saturated action blue to a deep navy.