What colors are in the Terracotta Interior palette?

The Terracotta Interior palette has 5 colors: #201510, #4A2E22, #C0693F, #9A9A6A, #F2E7D6.

Where can I use this palette?

It's a Earthy palette — well suited to organic brands, food & craft, interiors, rustic & natural themes.

Is the Terracotta Interior palette accessible?

Its darkest and lightest colors have a contrast ratio of 14.60:1. 4 color pairs in it meet WCAG AA for text.

How do I use this palette in CSS?

Copy the CSS custom properties (:root variables) from the Export section, or grab any single hex with one click.

Can I export the Terracotta Interior palette?

Yes — export to CSS, SCSS, Tailwind config or JSON, or copy all hex codes at once.

Text #201510 Graphite Secondary #4A2E22 Espresso Primary #C0693F Copper Accent #9A9A6A Moss Green Surface #F2E7D6 Eggshell

Terracotta Interior

Warm Interiors & craft 5 colors

A fired-clay terracotta beside a dusty olive, grounded in dark walnut and set on warm plaster. An interiors palette that happens to pass contrast, so it works on a wall and in a UI.

Open in generator All palettes

Text Graphite — #201510

Secondary Espresso — #4A2E22

Primary Copper — #C0693F

Accent Moss Green — #9A9A6A

Surface Eggshell — #F2E7D6

Contrast matrix

Text on Surface 14.60 AAA

Primary on Surface 3.22 AA Large

Text on Secondary 1.45 Fail

Surface on Primary 3.22 AA Large

Accent on Text 6.13 AA

Ratios are WCAG 2 contrast between the roles as assigned above. AA needs 4.5:1 for body text, 3:1 for large text.

Export tokens

:root {
  --text: #201510;
  --secondary: #4A2E22;
  --primary: #C0693F;
  --accent: #9A9A6A;
  --surface: #F2E7D6;
}

$terracotta-interior-text: #201510;
$terracotta-interior-secondary: #4A2E22;
$terracotta-interior-primary: #C0693F;
$terracotta-interior-accent: #9A9A6A;
$terracotta-interior-surface: #F2E7D6;

// tailwind.config.js — theme.extend.colors
colors: {
  'terracotta-interior': {
    'text': '#201510',
    'secondary': '#4A2E22',
    'primary': '#C0693F',
    'accent': '#9A9A6A',
    'surface': '#F2E7D6',
  },
}

{
    "terracotta-interior": {
        "text": {
            "value": "#201510",
            "type": "color"
        },
        "secondary": {
            "value": "#4A2E22",
            "type": "color"
        },
        "primary": {
            "value": "#C0693F",
            "type": "color"
        },
        "accent": {
            "value": "#9A9A6A",
            "type": "color"
        },
        "surface": {
            "value": "#F2E7D6",
            "type": "color"
        }
    }
}

{
    "text": "#201510",
    "secondary": "#4A2E22",
    "primary": "#C0693F",
    "accent": "#9A9A6A",
    "surface": "#F2E7D6"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#201510
#4A2E22
#C0693F
#9A9A6A
#F2E7D6

Download for Procreate

How the roles work

SurfaceThe lightest color — page and card backgrounds.

TextThe darkest color — body text and high-contrast UI.

PrimaryThe most chromatic middle — buttons, links, the one color that pushes.

AccentThe second most chromatic — badges, highlights, states.

SecondaryEverything else — fills, borders, supporting surfaces.

Terracotta Interior

Contrast matrix

Export tokens

How the roles work

Related palettes