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

boho brandinginterior moodboardsceramicswedding stationery

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

Related palettes

Copied