Color collection
Earthy Green Color Palettes
Earthy green palettes for sustainability, outdoor brands, wellness products, and grounded editorial sites.
#317CD8Accent#D69B51Surface#EBEEF4Text#121821Support#CE82A4Earthy Green 16Earthy / Green / NatureQuality 97Primary#314DD8Accent#C7D651Surface#EBECF4Text#121421Support#CE828FEarthy Green 1Earthy / Green / NatureQuality 95Primary#D83177Accent#D66151Surface#F4EBEEText#211217Support#A2CE82Earthy Green 2Earthy / Green / NatureQuality 95Primary#D83148Accent#D69F51Surface#F4EBEBText#211213Support#8CCE82Earthy Green 3Earthy / Green / NatureQuality 95Primary#D84A31Accent#51C2D6Surface#F4EEEBText#211512Support#82CE8EEarthy Green 10Earthy / Green / NatureQuality 95Primary#31D848Accent#7C51D6Surface#EBF4EEText#122115Support#8C82CEHow to use these palettes
Start with the primary and surface colors, then test text contrast before exporting. These palettes are most useful for sustainability brands, outdoor products, wellness sites, and nature editorials. Pair greens with warm neutral surfaces so the page feels natural without becoming muddy.
Every generated palette is sorted by a UI quality score that favors readable text, clear surface separation, and controlled saturation.
CSS Variables
:root {
--primary: #317CD8;
--accent: #D69B51;
--surface: #EBEEF4;
--text: #121821;
--support: #CE82A4;
}FAQ
Where should I use earthy green color palettes?
These palettes are designed for sustainability brands, outdoor products, wellness sites, and nature editorials.
Can I copy these colors into a design system?
Yes. Each palette includes clear interface roles such as Primary, Accent, Surface, Text, and Support.
How do I avoid low contrast?
Pair greens with warm neutral surfaces so the page feels natural without becoming muddy.