Terracotta & Sage Color Palette
The internet's favorite pairing: warm terracotta and clay against calming sage and olive, tied together with oat and stone neutrals. The rust and the green temper each other — earthy and grounded without the whole thing tipping orange or going cold. A reliable workhorse for boho branding, ceramics, and interior moodboards.
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 {
--terracotta-and-sage-1: #F4ECDC;
--terracotta-and-sage-2: #EBDFC8;
--terracotta-and-sage-3: #E0D0B2;
--terracotta-and-sage-4: #D3BF9A;
--terracotta-and-sage-5: #C4AC82;
--terracotta-and-sage-6: #B3976B;
--terracotta-and-sage-7: #C9805E;
--terracotta-and-sage-8: #BC7252;
--terracotta-and-sage-9: #AE6447;
--terracotta-and-sage-10: #9E573D;
--terracotta-and-sage-11: #8C4B34;
--terracotta-and-sage-12: #79402C;
--terracotta-and-sage-13: #A85138;
--terracotta-and-sage-14: #974730;
--terracotta-and-sage-15: #853D29;
--terracotta-and-sage-16: #723423;
--terracotta-and-sage-17: #5F2B1D;
--terracotta-and-sage-18: #4D2317;
--terracotta-and-sage-19: #AEB69A;
--terracotta-and-sage-20: #9CA587;
--terracotta-and-sage-21: #899375;
--terracotta-and-sage-22: #758063;
--terracotta-and-sage-23: #626D52;
--terracotta-and-sage-24: #4F5A42;
--terracotta-and-sage-25: #8A8568;
--terracotta-and-sage-26: #7A765C;
--terracotta-and-sage-27: #6A6750;
--terracotta-and-sage-28: #5A5844;
--terracotta-and-sage-29: #4B4A38;
--terracotta-and-sage-30: #3C3B2D;
}SCSS
$terracotta-and-sage-1: #F4ECDC;
$terracotta-and-sage-2: #EBDFC8;
$terracotta-and-sage-3: #E0D0B2;
$terracotta-and-sage-4: #D3BF9A;
$terracotta-and-sage-5: #C4AC82;
$terracotta-and-sage-6: #B3976B;
$terracotta-and-sage-7: #C9805E;
$terracotta-and-sage-8: #BC7252;
$terracotta-and-sage-9: #AE6447;
$terracotta-and-sage-10: #9E573D;
$terracotta-and-sage-11: #8C4B34;
$terracotta-and-sage-12: #79402C;
$terracotta-and-sage-13: #A85138;
$terracotta-and-sage-14: #974730;
$terracotta-and-sage-15: #853D29;
$terracotta-and-sage-16: #723423;
$terracotta-and-sage-17: #5F2B1D;
$terracotta-and-sage-18: #4D2317;
$terracotta-and-sage-19: #AEB69A;
$terracotta-and-sage-20: #9CA587;
$terracotta-and-sage-21: #899375;
$terracotta-and-sage-22: #758063;
$terracotta-and-sage-23: #626D52;
$terracotta-and-sage-24: #4F5A42;
$terracotta-and-sage-25: #8A8568;
$terracotta-and-sage-26: #7A765C;
$terracotta-and-sage-27: #6A6750;
$terracotta-and-sage-28: #5A5844;
$terracotta-and-sage-29: #4B4A38;
$terracotta-and-sage-30: #3C3B2D;Tailwind
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'terracotta-and-sage': {
'1': '#F4ECDC',
'2': '#EBDFC8',
'3': '#E0D0B2',
'4': '#D3BF9A',
'5': '#C4AC82',
'6': '#B3976B',
'7': '#C9805E',
'8': '#BC7252',
'9': '#AE6447',
'10': '#9E573D',
'11': '#8C4B34',
'12': '#79402C',
'13': '#A85138',
'14': '#974730',
'15': '#853D29',
'16': '#723423',
'17': '#5F2B1D',
'18': '#4D2317',
'19': '#AEB69A',
'20': '#9CA587',
'21': '#899375',
'22': '#758063',
'23': '#626D52',
'24': '#4F5A42',
'25': '#8A8568',
'26': '#7A765C',
'27': '#6A6750',
'28': '#5A5844',
'29': '#4B4A38',
'30': '#3C3B2D',
},
},
},
},
};JSON
{
"name": "Terracotta & Sage",
"colors": [
"#F4ECDC",
"#EBDFC8",
"#E0D0B2",
"#D3BF9A",
"#C4AC82",
"#B3976B",
"#C9805E",
"#BC7252",
"#AE6447",
"#9E573D",
"#8C4B34",
"#79402C",
"#A85138",
"#974730",
"#853D29",
"#723423",
"#5F2B1D",
"#4D2317",
"#AEB69A",
"#9CA587",
"#899375",
"#758063",
"#626D52",
"#4F5A42",
"#8A8568",
"#7A765C",
"#6A6750",
"#5A5844",
"#4B4A38",
"#3C3B2D"
]
}Hex list
#F4ECDC
#EBDFC8
#E0D0B2
#D3BF9A
#C4AC82
#B3976B
#C9805E
#BC7252
#AE6447
#9E573D
#8C4B34
#79402C
#A85138
#974730
#853D29
#723423
#5F2B1D
#4D2317
#AEB69A
#9CA587
#899375
#758063
#626D52
#4F5A42
#8A8568
#7A765C
#6A6750
#5A5844
#4B4A38
#3C3B2D