Terra Cotta
Warm earthy orange with baked clay energy
Terra Cotta is a warm, saturated orange-red with earthy, clay-like undertones. It projects energy and urgency, making it an excellent choice for call-to-action buttons or accent elements in web design. Because it offers strong contrast against black text, it maintains good legibility for smaller type. The hex code for this shade is #e3735e. Use it sparingly as an accent rather than a full page background.
About Terra Cotta
Baked clay pulled from the kiln a shade too soon
What does terra cotta mean?
Terra cotta often calls to mind fired clay pots, sun-warmed brick, adobe walls, and the dusty tones of autumn. Its mid-level lightness and softened saturation give it an easygoing warmth, less urgent and loud than a straight red.
Where you see terra cotta
- terracotta flower pots
- clay roof tiles
- adobe walls
- unglazed pottery
- brick patios
- rusted garden tools
What it works for
It works for food packaging, kitchen and dining rooms, pottery brands, accent walls, and fall or summer campaigns.
What colors go with terra cotta?
Sage Green #9caf88The cool green sits across from this warm red, so the pair balances itself with little effort.Cream #fffdd0Cream softens the red so it reads earthy rather than loud, like pottery on a linen shelf.Deep Teal #00555aDeep teal grounds the red's warmth and keeps the whole palette from feeling flat.
Questions about Terra Cotta
What is the hex code for Terra Cotta?
Terra Cotta is #e3735e. In RGB that is rgb(227, 115, 94), in HSL hsl(9, 70%, 63%) and in CMYK 0%, 49%, 59%, 11%.
How should I use Terra Cotta #e3735e in UI design?
Use #e3735e primarily as a high-impact accent color for buttons, notifications, or critical call-to-action elements rather than large backgrounds. Its inherent warmth draws the eye quickly, ensuring key interactive components remain highly visible against neutral white or light gray interfaces.
Is Terra Cotta readable on white or black?
Terra Cotta has a 3.05:1 contrast ratio on white and 6.88:1 on black. WCAG asks for 4.5:1 for body text and 3:1 for large text, so on white it works only for large text (24px, or 18.5px bold) and on black it works for body text. Try other pairs in the contrast checker.