Terracotta

#E35336

What color is Terracotta?

Terracotta is a warm brownish-red with strong orange undertones, hex #E35336, close to the color of sun-dried clay brick. The tone is muted rather than vivid, with a dusty, earthy quality that keeps it from reading as a bright red or orange.

What is the meaning of the color Terracotta?

Named from the Italian phrase meaning baked earth, terracotta describes the fired clay material used in pottery and roof tiles across the Mediterranean since at least 3000 BCE. Ancient Greek and Roman civilizations produced terracotta figurines, vessels, and architectural elements on a large scale, establishing the color’s long association with craft and building. The name entered English as a color term in the early 19th century, coinciding with renewed European interest in classical antiquity. Wedgwood, the British ceramics company founded in 1759, helped anchor the color in the domestic market through its widely sold earthenware lines.

RGB
227, 83, 54
HSL
10°, 76%, 55%
CMYK
0, 63, 76, 11
HSV
10°, 76%, 89%
Terracotta color

What colors go with Terracotta?

Colors that pair well with Terracotta include:
Cream: soft, warm neutral
Olive Green: earthy, grounded contrast
Navy Blue: cool, bold balance
Mustard Yellow: rich, warm depth
Dusty Rose: gentle, tonal softness

Similar Colors

Conversions & Codes

Format Value CSS
HEX #E35336 color: #E35336;
RGB 227, 83, 54 color: rgb(227, 83, 54);
RGB Percentage 89%, 33%, 21% color: rgb(89%, 33%, 21%);
CMYK 0%, 63%, 76%, 11% Not supported in CSS
HSL 10°, 76%, 55% color: hsl(10, 76%, 55%);
HSV 10°, 76%, 89% Not supported in CSS
CIE-LAB 44, 29, 10 color: lab(44% 29 10);
Decimal 14897974 Not supported in CSS

Color Variations

Shades

#E35235
#DE3E1E
#C5371B
#AD3018
#942A14
#7B2311
#631C0D
#4A150A

Tints

#F7CBC2
#F4BAAE
#F1A99A
#EE9786
#EC8672
#E9755D
#E66349
#E35235

Tones

#E35235
#DB583E
#D25E46
#C9644F
#C16958
#B86F61
#AF7569
#A67B72

Hues

#E35235
#E3D535
#6FE335
#35E37E
#35C6E3
#3544E3
#A935E3
#E3359B

Color Harmonies

Analogous

#E3356F
Click to copy
#E35336
Click to copy
#E3A935
Click to copy

Complementary

#E35336
Click to copy
#35C6E3
Click to copy

Split Complementary

#E35336
Click to copy
#35E3A9
Click to copy
#356FE3
Click to copy

Triadic

#E35336
Click to copy
#35E352
Click to copy
#5235E3
Click to copy

Tetradic

#E35336
Click to copy
#6FE335
Click to copy
#35C6E3
Click to copy
#A935E3
Click to copy

Square

#E35336
Click to copy
#6FE335
Click to copy
#35C6E3
Click to copy
#A935E3
Click to copy

CSS & Dev Snippets

CSS
.terracotta {
  color: #E35336;
}
SCSS
$terracotta: #E35336;
RGB
rgb(227, 83, 54)

Accessibility & Contrast

White background

3.78:1
3.78
contrast ratio on a white background
Element
AA
AAA
Small text
Large text
UI element

Black background

5.56:1
5.56
contrast ratio on a black background
Element
AA
AAA
Small text
Large text
UI element

Popular Tags