Figma color wheel
Want to find the perfect complementary or analogous colors to match terracotta?
Skip to main content
Everything you need to know about terracotta to inspire your next design.
Terracotta is a saturated orange-brown color reminiscent of fired clay, lending it a warm, earthy quality. It intersects with red and yellow on the color wheel, giving it a bright summertime feeling.

Shades
Tints
Tones
Hues
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Brickstone
Terracotta Terrace
Eclectic Affair
Terracotta is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- HEX code: #E35336
- RGB value: 89% red, 32.5% green, and 21.2% blue
Accessibility considerations play a crucial role in UX and UI design color choices. Figma offers plugins in the Community to make sure your designs meet Web Content Accessibility Guidelines.
Here are some ways to use terracotta in your designs:
Keep in mind that color and its meaning can change from culture to culture—and at any given time. If you are designing for a global audience, research color considerations for your specific regions.
For variations within the same color spectrum as terracotta, consider:
To complement terracotta, consider pairing it with:
Other colors worth considering include white for a wintery aesthetic, sage for a rustic color palette, and cream for a Spanish mission-themed color scheme.
While terracotta is bold, it may clash with:
Terracotta symbolizes serenity and groundedness. This color has a tranquilizing effect that can help viewers relax. It can also encourage a sense of appreciation for earthy, natural beauty.
In color psychology, terracotta evokes feelings of nurturing and protection. Terracotta’s resemblance to fired clay and natural soil gives it an earthy connection, creating a sense of stability, grounding, and security.
In UI design, terracotta can be a catalyst for action. Incorporating this color into web pages can add a welcomed sense of energy and excitement. Consider using this color in fitness, health, and travel apps.
Terracotta, a type of clay-based ceramic, is abundant in almost every region of the world and has been for many centuries. One of the earliest and most famous uses of this unique color is Emperor Qin Shi Huang’s terracotta army. Historians estimate that over 8,000 terracotta soldier statues were built in 248 BCE to be buried with the emperor after his passing in 210 BCE.
More than a millennia later, the Spanish gravitated toward terracotta color schemes. Terracotta floor and rooftop tiling are abundant in Spanish Colonial-style homes. As conquistadors took land from Indigenous peoples in the Americas, they built numerous missions that prominently featured this color.
In the contemporary art world, terracotta remains a popular color among artists across all borders. Terracotta color schemes are frequently employed in wall art, home decor, modern fashion, and company logos.
Contrast 3.78
#E35336
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Fail | Fail | |
Pass | Fail | |
Pass | Fail |
Contrast 5.56
#E35336
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Pass | Fail | |
Pass | Pass | |
Pass | Pass |
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
The hexadecimal color #E35336, known as terracotta, has RGB values of R:227, G:83, B:54 and CMYK values of C:0, M:0.63, Y:0.76, K:0.11.
| VALUE | CSS | |
|---|---|---|
| HEX | E35336 | #E35336 |
| RGB DECIMAL | 227, 83, 54 | RGB(227,83,54) |
| RGB PERCENTAGE | 89, 32.5, 21.2 | RGB(89%,32.5%,21.2%) |
| CMYK | 0, 63, 76, 11 | |
| HSL | 10.1°, 75.5, 55.1 | HSL(10.1°,75.5%,55.1%) |
| HSV (OR HSB) | 10.1°, 76.2, 89 | |
| WEB SAFE | CC6633 | #CC6633 |
| CIE-LAB | 54.853, 54.475, 45.959 | |
| XYZ | 35.439, 22.788, 6.022 | |
| xyY | 0.552, 0.355, 22.788 | |
| CIE-LCH | 54.853, 71.272, 40.154 | |
| CIE-LUV | 54.853, 114.627, 35.979 | |
| HUNTER-LAB | 47.736, 48.979, 25.936 | |
| BINARY | 11100011, 01010011, 00110110 | |
| iOS - SwiftUI | Color(red: 0.8902, green: 0.3255, blue: 0.2118) | |
| iOS - UIKit | UIColor(red: 0.8902, green: 0.3255, blue: 0.2118, alpha: 1.0) | |
| Android - Compose | Color(0xFFE35336) |
Want to find the perfect complementary or analogous colors to match terracotta?
Discover the warmth and energy of burnt orange.
Dive into the rich and lush tone of dark red.