Terracotta color palette
Fired clay at five temperatures. #E07B54 is a sunbaked tile orange, and each step darkens and reddens a little more until #6B2008, a burnt rust brown. The hue holds steady, so the set looks like one material in light and shade. There's no light tone, so pair it with cream or white. Ceramics studios and tile showrooms can use it to match the product itself.
Terracotta palette in use
On a cream or white page, use #6B2008 for text and #A8441F for buttons. #E07B54 suits highlight panels and illustrations, and #C9603A and #8B3010 work for borders, icons and hover states.
This pair measures 11.44:1, so it works for body text too. The button uses #C9603A with black text.
ButtonGood for
- Ceramics studio website
- Tile showroom website
- Plant shop branding
- Home decor catalog
Readable color pairs
Pairs from this palette with at least 3:1 contrast (WCAG 2). Use AA and AAA pairs for body text, and AA large pairs for headings 24px and up.
| Text | Background | Ratio | Rating |
|---|---|---|---|
#6B2008 | #E07B54 | 3.88:1 | AA large |
Terracotta palette as code
CSS variables
:root {
--terracotta-1: #E07B54;
--terracotta-2: #C9603A;
--terracotta-3: #A8441F;
--terracotta-4: #8B3010;
--terracotta-5: #6B2008;
}Tailwind v4
@theme {
--color-terracotta-1: #E07B54;
--color-terracotta-2: #C9603A;
--color-terracotta-3: #A8441F;
--color-terracotta-4: #8B3010;
--color-terracotta-5: #6B2008;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'terracotta': {
100: '#E07B54',
200: '#C9603A',
300: '#A8441F',
400: '#8B3010',
500: '#6B2008',
},SCSS
$terracotta-1: #E07B54;
$terracotta-2: #C9603A;
$terracotta-3: #A8441F;
$terracotta-4: #8B3010;
$terracotta-5: #6B2008;JSON
["#E07B54","#C9603A","#A8441F","#8B3010","#6B2008"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.