Earthy Color Palettes
Explore earthy color palettes with semantic roles, accessible contrast, live interface previews, and CSS-ready HEX values.
background#F4F1E8
surface#FFFCF5
secondary#A67C52
primary#4F6F52
accent#C58C4A
muted#687266
text#253126
How the colors relate
Forest green and clay create a natural temperature contrast, while sand and off-white prevent the system from becoming too dense.
Where to use each role
Use the light neutrals for broad surfaces, green for structure and trust, and clay for actions or product highlights that need warmth.
A useful variation
Replace clay with muted ochre for a drier landscape direction or add a dusty blue secondary role for an outdoor product context.
Related directions
Frequently asked questions
Do earthy palettes need to use only natural colors?
No. A small cooler accent can improve orientation. The palette still feels earthy when its dominant surfaces and anchors retain natural, muted relationships.