Colors EncyclopediaNamed color
Terracotta
Terracotta color #E2725B: RGB 226, 114, 91 and HSL 10°, 70%, 62%. Explore its warm orange profile, contrast, CSS, palettes and harmonies.
Use this color
Create with Terracotta
Open a professional color tool with #E2725B already applied. Each configuration stays canonical to the tool and can be adjusted or shared.
Generate palette & CSS variablesCreate 50–950 tokens and export CSS, SCSS, JSON, or Tailwind.Open configured tool →Open in Gradient StudioStart with Terracotta and its complementary color.Open configured tool →Mix this colorBlend it with a complementary color and copy color-mix() CSS.Open configured tool →Check contrastOpen the strongest black or white background pairing.Open configured tool →Accessible combinationsReview AA and AAA text options, alternatives, warnings, and UI guidance.Open configured tool →Create glass surfaceUse this color as the tint for a translucent UI panel.Open configured tool →
CSS Utilities
--color-terracotta: #E2725B;
.bg-terracotta { background-color: #E2725B; }
.text-terracotta { color: #E2725B; }Color history, meaning and use · Editorially reviewed
About Terracotta Color
Terracotta is more than a modern color label: the name comes from the Italian terra cotta, or “cooked earth,” and originally describes fired clay. Its long association with sculpture, pottery, roof tiles, and architectural ornament explains why the color still reads as material rather than purely decorative.
The familiar red-brown range is not one perfectly fixed hue. The Metropolitan Museum of Art notes that iron oxide content and the amount of oxygen present during firing can shift clay from buff and reddish tones toward gray or black. In interiors and digital palettes, this makes Terracotta a useful bridge between mineral surfaces, warm neutrals, and stronger orange-red accents.
This page’s HEX value is a contemporary digital reference, not a claim that every terracotta object has the same measured color.
WCAG Accessibility
Contrast checks for Terracotta against black and white text.
Black text6.79:1AA Pass
White text3.09:1AA Fail
Downloadable color reference infographic
Terracotta Color Reference Infographic
Save a high-resolution infographic of Terracotta, including its color values, coordinated palette, and black and white text contrast.
Color Harmonies
Variants
Pairings
Machine-readable data
Machine-Readable Color Data (JSON)
Perfect for CSS, design systems, automation, and AI ingestion.
Luminance0.2896
Black text6.79:1AA Pass
White text3.09:1AA Fail
hexCanonical HEX valuergbRed, green, blue channelshslHue, saturation, lightnesscmykApproximate print conversionwcagAA and AAA contrast optionsharmoniesMathematical harmony setsvariantsGenerated tone variantsnearestColorsKnowledge graph neighborsStructured sections
Color systems
{
"hex": "#E2725B",
"rgb": [
226,
114,
91
],
"hsl": [
10,
70,
62
],
"cmyk": [
0,
50,
60,
11
],
"luminance": 0.2896,
"contrast": {
"black": 6.79,
"white": 3.09
}
}WCAG
{
"AA": [
"#000000",
"#1A1A1A"
],
"AAA": []
}Harmonies
{
"complementary": "#5ACBE2",
"analogous": [
"#E25A87",
"#E2B55A"
],
"triadic": [
"#5AE271",
"#715AE2"
],
"tetradic": [
"#87E25A",
"#5ACBE2",
"#B55AE2"
],
"splitComplementary": [
"#5AE2B5",
"#5A87E2"
],
"monochromatic": [
"#F0B4A8",
"#E2725B",
"#BF3C22"
]
}Variants
{
"light": "#F0B4A8",
"dark": "#BF3C22",
"saturated": "#F76345",
"desaturated": "#CD7F70",
"pastel": "#F0D2CC",
"neon": "#FF7F66"
}Pairings
{
"best": [
"#000000",
"#5ACBE2",
"#E25A87",
"#E2B55A"
],
"avoid": [
"#CD7F70",
"#F0B4A8"
],
"neutral": [
"#1A1A1A",
"#F5F5F5",
"#E8E8E4"
],
"highContrast": [
"#000000"
],
"lowContrast": [
"#F0B4A8",
"#CD7F70"
]
}Knowledge graph
{
"nearestColors": [
"burnt-sienna",
"raw-sienna",
"indian-red",
"roman-red",
"coral"
],
"generatedPalettes": [
"terracotta"
],
"generatedComparisons": [
"burnt-sienna-vs-terracotta",
"raw-sienna-vs-terracotta"
],
"relatedFamilies": [
"/colors/by-family/orange",
"/colors/by-temperature/warm",
"/colors/by-tone/earth-tone",
"/colors/by-tone/muted"
],
"relatedTools": [
"/harmonies/terracotta",
"/wcag/terracotta",
"/css/colors/terracotta",
"/hex/e2725b",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
],
"semanticRelations": {
"broader": [
"/colors/by-family/orange",
"/colors/by-temperature/warm",
"/colors/by-tone/earth-tone",
"/colors/by-tone/muted"
],
"narrower": [
"/palettes/terracotta"
],
"related": [
"/colors/burnt-sienna",
"/colors/raw-sienna",
"/colors/indian-red",
"/colors/roman-red",
"/colors/coral",
"/compare/burnt-sienna-vs-terracotta",
"/compare/raw-sienna-vs-terracotta",
"/harmonies/terracotta",
"/wcag/terracotta",
"/css/colors/terracotta",
"/hex/e2725b",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
]
}
}Full JSON dataset
{
"slug": "terracotta",
"name": "Terracotta",
"hex": "#E2725B",
"family": "orange",
"temperature": "warm",
"tone": [
"earth-tone",
"muted"
],
"uses": [
"interior design",
"ceramic palettes",
"editorial accents"
],
"psychology": {
"associations": [
"warmth",
"craft",
"earthiness"
],
"contexts": [
"home decor",
"food",
"artisan branding"
],
"avoidIn": [
"cold technical dashboards"
]
},
"aliases": [
"terra cotta"
],
"sourceType": "curated",
"confidence": "high",
"sourceUrl": "https://www.colorsencyclopedia.com/assets/colors.json",
"reviewStatus": "manual",
"editorialNotes": "Curated internal color record with computed technical properties.",
"origin": {
"type": "common",
"notes": "Curated common color reference."
},
"tags": [
"orange",
"warm",
"earth-tone",
"muted",
"interior-design",
"ceramic-palettes",
"editorial-accents",
"warmth",
"craft",
"earthiness"
],
"popularity": 88,
"rgb": [
226,
114,
91
],
"hsl": [
10,
70,
62
],
"cmyk": [
0,
50,
60,
11
],
"luminance": 0.2896,
"contrast": {
"black": 6.79,
"white": 3.09
},
"harmonies": {
"complementary": "#5ACBE2",
"analogous": [
"#E25A87",
"#E2B55A"
],
"triadic": [
"#5AE271",
"#715AE2"
],
"tetradic": [
"#87E25A",
"#5ACBE2",
"#B55AE2"
],
"splitComplementary": [
"#5AE2B5",
"#5A87E2"
],
"monochromatic": [
"#F0B4A8",
"#E2725B",
"#BF3C22"
]
},
"variants": {
"light": "#F0B4A8",
"dark": "#BF3C22",
"saturated": "#F76345",
"desaturated": "#CD7F70",
"pastel": "#F0D2CC",
"neon": "#FF7F66"
},
"wcag": {
"AA": [
"#000000",
"#1A1A1A"
],
"AAA": []
},
"css": {
"variable": "--color-terracotta: #E2725B;",
"utility": ".bg-terracotta { background-color: #E2725B; }",
"textUtility": ".text-terracotta { color: #E2725B; }"
},
"nearestColors": [
"burnt-sienna",
"raw-sienna",
"indian-red",
"roman-red",
"coral"
],
"generatedPalettes": [
"terracotta"
],
"generatedComparisons": [
"burnt-sienna-vs-terracotta",
"raw-sienna-vs-terracotta"
],
"relatedFamilies": [
"/colors/by-family/orange",
"/colors/by-temperature/warm",
"/colors/by-tone/earth-tone",
"/colors/by-tone/muted"
],
"relatedTools": [
"/harmonies/terracotta",
"/wcag/terracotta",
"/css/colors/terracotta",
"/hex/e2725b",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
],
"semanticRelations": {
"broader": [
"/colors/by-family/orange",
"/colors/by-temperature/warm",
"/colors/by-tone/earth-tone",
"/colors/by-tone/muted"
],
"narrower": [
"/palettes/terracotta"
],
"related": [
"/colors/burnt-sienna",
"/colors/raw-sienna",
"/colors/indian-red",
"/colors/roman-red",
"/colors/coral",
"/compare/burnt-sienna-vs-terracotta",
"/compare/raw-sienna-vs-terracotta",
"/harmonies/terracotta",
"/wcag/terracotta",
"/css/colors/terracotta",
"/hex/e2725b",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
]
},
"pairings": {
"best": [
"#000000",
"#5ACBE2",
"#E25A87",
"#E2B55A"
],
"avoid": [
"#CD7F70",
"#F0B4A8"
],
"neutral": [
"#1A1A1A",
"#F5F5F5",
"#E8E8E4"
],
"highContrast": [
"#000000"
],
"lowContrast": [
"#F0B4A8",
"#CD7F70"
]
}
}