Earth Tones Color Palette
A complete earth-tone reference: sand and beige, ochre, sienna, walnut umber, and khaki olive, each running light to dark. It's the natural, grounded spectrum behind so much organic branding and pottery — warm, dependable, never loud. Reach for it whenever a design needs to feel made of clay and linen.
Get Paintrix free on the App Store.
Download
Hex codes
Color theory
Base
Complement
Analogous −30°
Analogous +30°
Triadic
Use it for
Code formats
CSS
:root {
--earth-tones-1: #E7D9BE;
--earth-tones-2: #DBC9A6;
--earth-tones-3: #CDB78D;
--earth-tones-4: #BCA374;
--earth-tones-5: #A98E5D;
--earth-tones-6: #957A48;
--earth-tones-7: #C79A45;
--earth-tones-8: #B6883A;
--earth-tones-9: #A57730;
--earth-tones-10: #926628;
--earth-tones-11: #7F5620;
--earth-tones-12: #6C4719;
--earth-tones-13: #B06A41;
--earth-tones-14: #9E5B37;
--earth-tones-15: #8C4D2E;
--earth-tones-16: #794026;
--earth-tones-17: #66341F;
--earth-tones-18: #542918;
--earth-tones-19: #6E5236;
--earth-tones-20: #60472D;
--earth-tones-21: #523C25;
--earth-tones-22: #45321E;
--earth-tones-23: #382818;
--earth-tones-24: #2B1F12;
--earth-tones-25: #8A8550;
--earth-tones-26: #7B7747;
--earth-tones-27: #6C683E;
--earth-tones-28: #5D5A35;
--earth-tones-29: #4E4C2C;
--earth-tones-30: #3F3E23;
}SCSS
$earth-tones-1: #E7D9BE;
$earth-tones-2: #DBC9A6;
$earth-tones-3: #CDB78D;
$earth-tones-4: #BCA374;
$earth-tones-5: #A98E5D;
$earth-tones-6: #957A48;
$earth-tones-7: #C79A45;
$earth-tones-8: #B6883A;
$earth-tones-9: #A57730;
$earth-tones-10: #926628;
$earth-tones-11: #7F5620;
$earth-tones-12: #6C4719;
$earth-tones-13: #B06A41;
$earth-tones-14: #9E5B37;
$earth-tones-15: #8C4D2E;
$earth-tones-16: #794026;
$earth-tones-17: #66341F;
$earth-tones-18: #542918;
$earth-tones-19: #6E5236;
$earth-tones-20: #60472D;
$earth-tones-21: #523C25;
$earth-tones-22: #45321E;
$earth-tones-23: #382818;
$earth-tones-24: #2B1F12;
$earth-tones-25: #8A8550;
$earth-tones-26: #7B7747;
$earth-tones-27: #6C683E;
$earth-tones-28: #5D5A35;
$earth-tones-29: #4E4C2C;
$earth-tones-30: #3F3E23;Tailwind
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'earth-tones': {
'1': '#E7D9BE',
'2': '#DBC9A6',
'3': '#CDB78D',
'4': '#BCA374',
'5': '#A98E5D',
'6': '#957A48',
'7': '#C79A45',
'8': '#B6883A',
'9': '#A57730',
'10': '#926628',
'11': '#7F5620',
'12': '#6C4719',
'13': '#B06A41',
'14': '#9E5B37',
'15': '#8C4D2E',
'16': '#794026',
'17': '#66341F',
'18': '#542918',
'19': '#6E5236',
'20': '#60472D',
'21': '#523C25',
'22': '#45321E',
'23': '#382818',
'24': '#2B1F12',
'25': '#8A8550',
'26': '#7B7747',
'27': '#6C683E',
'28': '#5D5A35',
'29': '#4E4C2C',
'30': '#3F3E23',
},
},
},
},
};JSON
{
"name": "Earth Tones",
"colors": [
"#E7D9BE",
"#DBC9A6",
"#CDB78D",
"#BCA374",
"#A98E5D",
"#957A48",
"#C79A45",
"#B6883A",
"#A57730",
"#926628",
"#7F5620",
"#6C4719",
"#B06A41",
"#9E5B37",
"#8C4D2E",
"#794026",
"#66341F",
"#542918",
"#6E5236",
"#60472D",
"#523C25",
"#45321E",
"#382818",
"#2B1F12",
"#8A8550",
"#7B7747",
"#6C683E",
"#5D5A35",
"#4E4C2C",
"#3F3E23"
]
}Hex list
#E7D9BE
#DBC9A6
#CDB78D
#BCA374
#A98E5D
#957A48
#C79A45
#B6883A
#A57730
#926628
#7F5620
#6C4719
#B06A41
#9E5B37
#8C4D2E
#794026
#66341F
#542918
#6E5236
#60472D
#523C25
#45321E
#382818
#2B1F12
#8A8550
#7B7747
#6C683E
#5D5A35
#4E4C2C
#3F3E23