What colors are in the Terracotta Sunset palette?

The Terracotta Sunset palette has 5 colors: #3E1F1A, #8A3B2E, #C36A4A, #E0955F, #F2C78C.

Where can I use this palette?

It's a Balanced palette — well suited to websites, product ui, presentations, marketing pages.

Is the Terracotta Sunset palette accessible?

Its darkest and lightest colors have a contrast ratio of 9.41:1. 3 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 Sunset palette?

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

Text #3E1F1A Bistre Secondary #8A3B2E Burnt Umber Primary #C36A4A Copper Accent #E0955F Buff Surface #F2C78C Topaz

Terracotta Sunset

5 colors

Open in generator All palettes

Text Bistre — #3E1F1A

Secondary Burnt Umber — #8A3B2E

Primary Copper — #C36A4A

Accent Buff — #E0955F

Surface Topaz — #F2C78C

Contrast matrix

Text on Surface 9.41 AAA

Primary on Surface 2.43 Fail

Text on Secondary 1.94 Fail

Surface on Primary 2.43 Fail

Accent on Text 6.10 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: #3E1F1A;
  --secondary: #8A3B2E;
  --primary: #C36A4A;
  --accent: #E0955F;
  --surface: #F2C78C;
}

$terracotta-sunset-text: #3E1F1A;
$terracotta-sunset-secondary: #8A3B2E;
$terracotta-sunset-primary: #C36A4A;
$terracotta-sunset-accent: #E0955F;
$terracotta-sunset-surface: #F2C78C;

// tailwind.config.js — theme.extend.colors
colors: {
  'terracotta-sunset': {
    'text': '#3E1F1A',
    'secondary': '#8A3B2E',
    'primary': '#C36A4A',
    'accent': '#E0955F',
    'surface': '#F2C78C',
  },
}

{
    "terracotta-sunset": {
        "text": {
            "value": "#3E1F1A",
            "type": "color"
        },
        "secondary": {
            "value": "#8A3B2E",
            "type": "color"
        },
        "primary": {
            "value": "#C36A4A",
            "type": "color"
        },
        "accent": {
            "value": "#E0955F",
            "type": "color"
        },
        "surface": {
            "value": "#F2C78C",
            "type": "color"
        }
    }
}

{
    "text": "#3E1F1A",
    "secondary": "#8A3B2E",
    "primary": "#C36A4A",
    "accent": "#E0955F",
    "surface": "#F2C78C"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#3E1F1A
#8A3B2E
#C36A4A
#E0955F
#F2C78C

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 Sunset

Contrast matrix

Export tokens

How the roles work

Related palettes