Earth Tones Color Palette
Grounded browns, olive and rust with a soft bone white. Earth tones feel natural and timeless, and every color works with every other.
Click any color to copy its HEX code.
Earth Tones color codes
| Name | HEX | RGB | HSL | |
|---|---|---|---|---|
| Bone | #EDE6DA | 237, 230, 218 | 38°, 35%, 89% | |
| Oat | #D8C8AE | 216, 200, 174 | 37°, 35%, 76% | |
| Camel | #B38B5D | 179, 139, 93 | 32°, 36%, 53% | |
| Olive | #6B6B3E | 107, 107, 62 | 60°, 27%, 33% | |
| Rust | #9B4A2B | 155, 74, 43 | 17°, 57%, 39% | |
| Espresso | #3B2A20 | 59, 42, 32 | 22°, 30%, 18% |
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 Bone (#EDE6DA) as the base, Oat (#D8C8AE) as the supporting color and Rust (#9B4A2B) as the accent, with Espresso (#3B2A20) for text and fine details.
Earth Tones
A quick preview of the palette with base, text and accent colors.
Rust OatWhere 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.
- Espresso on Bone#3B2A20 on #EDE6DA · 11.0:1
- Espresso on Oat#3B2A20 on #D8C8AE · 8.3:1
- Rust on Bone#9B4A2B on #EDE6DA · 5.0:1
CSS variables
:root {
--bone: #EDE6DA;
--oat: #D8C8AE;
--camel: #B38B5D;
--olive: #6B6B3E;
--rust: #9B4A2B;
--espresso: #3B2A20;
}