Terracotta Color Palette
Sun-baked clay tones from soft blush to deep umber. Terracotta brings Mediterranean warmth to a room and pairs naturally with plants, rattan and linen.
Click any color to copy its HEX code.
Terracotta color codes
| Name | HEX | RGB | HSL | |
|---|---|---|---|---|
| Sand | #EFE2CF | 239, 226, 207 | 36°, 50%, 87% | |
| Clay Blush | #F2D4C2 | 242, 212, 194 | 23°, 65%, 85% | |
| Peach Clay | #E3A07C | 227, 160, 124 | 21°, 65%, 69% | |
| Terracotta | #C8643B | 200, 100, 59 | 17°, 56%, 51% | |
| Burnt Sienna | #9A4426 | 154, 68, 38 | 16°, 60%, 38% | |
| Umber | #5A2E1D | 90, 46, 29 | 17°, 51%, 23% |
How to use this palette
A simple way to use 6 colors without chaos is the 60-30-10 rule: about 60% of the space in the lightest shade, 30% in a supporting color and 10% in the accent. For this palette that is Sand (#EFE2CF) as the base, Clay Blush (#F2D4C2) as the supporting color and Terracotta (#C8643B) as the accent, with Umber (#5A2E1D) for text and fine details.
Terracotta
A quick preview of the palette with base, text and accent colors.
Terracotta Clay BlushWhere it works
Readable text color pairs
These combinations reach a contrast ratio of at least 4.5:1, the WCAG AA level for normal text, so they are safe for text on websites, posters and invitations.
- Umber on Sand#5A2E1D on #EFE2CF · 8.9:1
- Umber on Clay Blush#5A2E1D on #F2D4C2 · 8.1:1
- Umber on Peach Clay#5A2E1D on #E3A07C · 5.2:1
- Burnt Sienna on Sand#9A4426 on #EFE2CF · 5.1:1
- Burnt Sienna on Clay Blush#9A4426 on #F2D4C2 · 4.6:1
CSS variables
:root {
--sand: #EFE2CF;
--clay-blush: #F2D4C2;
--peach-clay: #E3A07C;
--terracotta: #C8643B;
--burnt-sienna: #9A4426;
--umber: #5A2E1D;
}