#E2725BTerracotta hex code: #E2725B · RGB 226, 114, 91. Also called terra cotta, clay.
Terracotta means 'baked earth' in Italian, after the fired clay used for pots, tiles and roofs. The common reference value is #E2725B, a warm orange-red. Real clay ranges from pale peach to deep brick, so terracotta palettes usually include several of these tones together.
Terracotta is central to earthy, Mediterranean and boho styles: interiors, ceramics, restaurants, travel, plant shops and sustainable brands. It makes a warm, friendly accent or button color.
Black text passes on the reference terracotta; white text only passes at large sizes. For a white-label button, deepen it to about #C14F37 (fired clay #C8553D is close, but falls just short at 4.35:1). Terracotta's classic companions are sage green, cream, olive, sand and deep teal.
Popular color names rarely have one official value. "Reference" values are the ones commonly listed in general color references; "HueWiz pick" values are lighter, deeper or muted versions chosen for interface work. Click a code to copy it.
#E2725Brgb(226, 114, 91) · reference#C8553Drgb(200, 85, 61) · HueWiz pick#CC7A5Frgb(204, 122, 95) · HueWiz pick#F2B8A2rgb(242, 184, 162) · HueWiz pickThe same base color in a light and a dark theme. Surfaces and text are tinted with terracotta's hue; links are adjusted until they reach 4.5:1 against the surface. The accent comes from the first palette below.
Spring collection
Designed around terracotta.
A short paragraph shows how body text reads on this surface, with an inline link in the brand color.
#FFF4F1 · text #301813 · link #B94D38Spring collection
Designed around terracotta.
A short paragraph shows how body text reads on this surface, with an inline link in the brand color.
#1F0F0B · text #F8EBE8 · link #E2725BHand-picked combinations that work with terracotta. Hover a swatch to see its code; click to copy.
WCAG 2.x asks for 4.5:1 for normal text (AA), 3:1 for large text and 7:1 for AAA. Ratios are truncated, not rounded, so a pass shown here is a real pass. Check your exact pairs in the contrast checker.
| Pairing | Ratio | Normal text | Large text |
|---|---|---|---|
| White text on terracotta | 3.09:1 | Fail | AA |
| Black text on terracotta | 6.79:1 | AA | AAA |
| Terracotta text on white | 3.09:1 | Fail | AA |
| Terracotta text on near-black #111111 | 6.10:1 | AA | AAA |
| White text on deeper terracotta #C0533E | 4.61:1 | AA | AAA |
An 11-step 50–950 ramp generated in OKLCH from #E2725B. Light steps suit backgrounds and borders, middle steps buttons, dark steps text. This is a generated ramp, not an official Tailwind palette.
@import "tailwindcss";
@theme {
--color-terracotta-50: #FFF4F1;
--color-terracotta-100: #FFE7E1;
--color-terracotta-200: #FFCEC2;
--color-terracotta-300: #FFA996;
--color-terracotta-400: #EF846D;
--color-terracotta-500: #D06852;
--color-terracotta-600: #AB5240;
--color-terracotta-700: #8B4030;
--color-terracotta-800: #6C2E22;
--color-terracotta-900: #4F1D14;
--color-terracotta-950: #330E07;
--color-terracotta: #E2725B;
}:root {
--terracotta: #E2725B;
--terracotta-rgb: 226 114 91;
--terracotta-light: #FFE7E1;
--terracotta-dark: #6C2E22;
}
.btn-terracotta {
background: #C0533E;
color: #FFFFFF;
}Need semantic roles (surface, text, primary, accent) and exports? Open terracotta in the Tailwind color generator.
#E2725B is the value HueWiz uses for terracotta; it equals rgb(226, 114, 91). Other common versions include #C8553D (fired clay), #CC7A5F (muted terracotta), #F2B8A2 (pale terracotta).
With an HSL hue of 10° and 70% saturation, terracotta reads as a warm red.
Use dark text. White on #E2725B measures 3.09:1 and black measures 6.79:1; WCAG AA needs 4.5:1 for normal text. For white text, deepen it to about #C0533E.
Try terracotta & sage (#E2725B, #9CAF88, #F5EFE6); mediterranean (#C8553D, #F2E3C6, #1F6F78); desert clay (#F2B8A2, #E2725B, #C19A6B). Each palette above can be copied or opened in the HueWiz studio.
Terracotta isn't a CSS keyword. These built-in CSS colors are the nearest by perceptual (OKLab) distance; lower ΔE means closer.