Terracotta color: code #E2725B

Terracotta

#E2725B

Color codes

  • HEX#E2725B
  • RGBrgb(226, 114, 91)
  • HSLhsl(10, 70%, 62%)
  • HSVhsv(10, 60%, 89%)
  • CMYKcmyk(0%, 50%, 60%, 11%)
  • LABlab(60.8% 41.6 32.8)
  • OKLCHoklch(67.7% 0.144 32.9)

About the color Terracotta

Terracotta has the HEX code #E2725B, which corresponds to rgb(226, 114, 91) in the RGB model. On the color wheel its hue sits at 10°, with 70% saturation and 62% lightness (hsl(10, 70%, 62%)).

Because of its hue it reads as a warm color: it tends to feel energetic and close, and it visually “advances” in a composition.

As a background it calls for dark text: black reaches a 6.79:1 contrast ratio on it, versus 3.09:1 for white.

For print, the approximate conversion is cmyk(0%, 50%, 60%, 11%). Always confirm with your printer’s color profile, because the result depends on paper and ink.

Lighter tints

Darker shades

Color combinations with Terracotta

Complementary

#E2725B · #5ACBE2

Analogous

#E25A87 · #E2725B · #E2B55A

Triadic

#E2725B · #5AE271 · #715AE2

Tetradic

#E2725B · #87E25A · #5ACBE2 · #B55AE2

Split-complementary

#E2725B · #5AE2B5 · #5A87E2

Monochromatic

#A0321C · #DA4B2F · #E2725B · #EDA99B · #F9E1DC

Terracotta with white and black text

White text Aa Bb Cc 123
3.09:1 · large text only
Black text Aa Bb Cc 123
6.79:1 · AA

Test other pairs in the contrast checker

From clay to screen

Terracotta comes from the Italian terra cotta, “baked earth”: it is the color of clay after firing, found in roof tiles, pots and floor tiles for thousands of years. The HEX #E2725B (rgb(226, 114, 91)) captures the brighter, more orange version of the shade; real pieces vary widely, from pinkish to reddish brown, depending on the clay and the firing.

The link to craftsmanship, the Mediterranean and nature is strong in many cultures, but it isn’t fixed. In interiors, terracotta suggests warmth and comfort; in a finance app, the same shade could be mistaken for a warning because it sits close to red and orange.

Where it works

Pairings

To see why terracotta and teal work together, read the color harmony guide.

White text on terracotta? Only when it’s large

#E2725B against white is about 3.1:1. Under WCAG, that is enough only for large text (24 px and up, or 18.66 px bold) and for icons, not for body copy or small button labels. You have two options:

  1. keep terracotta and use dark text, which reaches 6.8:1 with black;
  2. darken the background to something like #A34A36, which exceeds 5.8:1 with white while staying in the same color family.

Compare both in the contrast checker.

How to use it in CSS

:root {
  --color-terracotta: #E2725B;
  --color-terracotta-rgb: 226, 114, 91;
}

.elemento {
  background-color: var(--color-terracotta);
  color: #000000;
}

Similar colors

Use Terracotta in our tools