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.
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:
- Create accents. Use terracotta sparsely to highlight important elements like CTA buttons and text containing vital information.
- Enhance readability and accessibility. Terracotta can create contrast between texts and backdrops, making it easier for users to read without straining their eyes.
- Evoke positive emotions. The vibrance and richness of terracotta can be downright infectious. Use a terracotta color scheme to help users feel energized and eager to take action
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:
- Cinnabar (#E84B3D) is a blend of red and orange that lacks terracotta’s brown tones.
- Red-orange (#FF4B33) shares terracotta’s orange and red hues but skews more red.
- Cinnamon (#D47E30) is a vibrant brown color with red and orange undertones.
To complement terracotta, consider pairing it with:
- Turquoise (#40E0D0) complements terracotta without overshadowing it.
- Champagne (#F7E6CA) and terracotta are often paired in Spanish Colonial architecture.
- Khaki (#D5C58A) generates a sense of comfort and groundedness when paired with terracotta.
- Royal blue (#305CDE) is a brilliant shade that creates a classic and elegant contrast with terracotta.
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:
- Rose (#FF1D8D) is a saturated pink with a blue undertone that clashes with terracotta’s earthy warmth.
- Bright yellow (#FFED29) is a highly saturated yellow that creates a visually jarring contrast with terracotta.
- Puce (#E491A6) is a muted color with a slightly cooler undertone that may clash with terracotta’s warm tones.
- Midnight blue (#272757) might give off a drab, uninviting aura when paired with terracotta.
- Neon green (#2CFF05) can overpower the more muted shade of terracotta.
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.
Color variations
Shades
Tints
Tones
Hues
Color Harmonies
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Custom Palettes
Brickstone
Terracotta Terrace
Eclectic Affair
Contrast 3.78
- Large Text
#E35336
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Fail | Fail | |
Pass | Fail | |
Pass | Fail |
Contrast 5.56
- Large Text
#E35336
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Pass | Fail | |
Pass | Pass | |
Pass | Pass |
Color simulations
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) |
