Terracotta can give a product interface a warmer visual direction than conventional cool grays or blues. Ceramic and earth-tone references are useful inspiration, but they do not establish that software teams have broadly adopted this color. This guide treats terracotta as a deliberate design option and tests what its exact screen values can do.
For seasonal campaigns and editorial layouts, see the Fall Color Palette and October Color Palette. Here the focus is interface tokens, text and control contrast, and theme roles.
Why terracotta can work in an interface
- A warm brand accent: #C85A32 can highlight an action or active state without turning every surface orange.
- A tactile reference: clay, brick and linen can inform an interface’s visual language. The full product experience—not a hue alone—determines how it feels.
- A useful companion to neutrals: espresso text and linen surfaces keep the accent distinct while supporting readable content.
A five-color terracotta UI palette
These are original sRGB design tokens, not a product claim or a universal accessibility guarantee. Keep a separate deeper action fill where normal-size white button text is needed.
| Token role | Color | HEX | RGB | HSL | Suggested use |
|---|---|---|---|---|---|
| --color-accent-primary | Terracotta Clay | #C85A32 | 200, 90, 50 | 16°, 60%, 49% | Accent and large-text applications; check button labels |
| --color-accent-secondary | Toasted Amber | #E29547 | 226, 149, 71 | 30°, 73%, 58% | Badges and highlights with tested dark text |
| --color-text-main | Espresso Bark | #2A1E1B | 42, 30, 27 | 12°, 22%, 14% | Body text and dark surfaces |
| --color-surface-canvas | Linen Oat | #F7F2EB | 247, 242, 235 | 35°, 43%, 95% | Light canvas and cards |
| --color-border-subtle | Muted Moss | #6B7B63 | 107, 123, 99 | 100°, 11%, 44% | Secondary details; verify essential boundaries |
Have a product screenshot or moodboard? Analyze its image to extract actual colors before assigning tokens.
Contrast before visual polish
| Foreground / background | Contrast | Normal text | Large text | UI components |
|---|---|---|---|---|
| #FFFFFF / #C85A32 | 4.23:1 | Below AA | AA; not AAA | Exceeds 3:1 where required |
| #FFFFFF / #B84B24 | 5.16:1 | AA; not AAA | AAA | Exceeds 3:1 where required |
| #2A1E1B / #E29547 | 6.63:1 | AA; not AAA | AAA | Exceeds 3:1 where required |
| #2A1E1B / #F7F2EB | 14.50:1 | AAA | AAA | Exceeds 3:1 where required |
For text, WCAG AA requires 4.5:1 at normal size and 3:1 at large size; AAA requires 7:1 and 4.5:1 respectively. Non-text contrast uses 3:1 for visual information needed to identify active controls and states against adjacent colors. A passing button label does not by itself verify the button boundary, focus indicator or entire interface.
White normal-size text on #C85A32 falls below 4.5:1. Use the deeper #B84B24 for that button label, or put #2A1E1B text on #E29547. A border or indicator needs its own adjacent-color test. Verify your states in the Contrast Checker.
Light and dark token roles
In light mode, use #F7F2EB as canvas, #2A1E1B as primary text and terracotta as a restrained accent. In dark mode, an espresso-like #1E1715 surface can preserve the warm direction; do not assume the light-theme text or action colors remain readable there. Test every dark pairing rather than copying the light token unchanged.
CSS custom properties to start from
--color-canvas: #F7F2EB;and--color-text-main: #2A1E1B;for the light foundation.--color-brand-accent: #C85A32;for large accents; do not automatically put normal white text on it.--color-brand-action: #B84B24;with white text for the tested AA button label.--color-dark-canvas: #1E1715;as a starting point that still needs pairwise checks.
Frequently asked questions
What makes terracotta useful as a UI accent?
It offers a warm alternative to cooler interface accents. Its role still needs to be defined and tested: #C85A32 works as a large-text or non-text accent against white, but not as a background for normal-size white text.
Can a terracotta palette meet WCAG contrast requirements?
Yes, for tested pairs. White text on the deeper #B84B24 measures 5.16:1 and meets AA for normal text; #2A1E1B on #F7F2EB measures 14.50:1 and exceeds AAA for normal text. Other states and boundaries need separate checks.
How is this different from a fall color palette?
A seasonal palette offers broad visual inspiration. This guide assigns exact terracotta and earth-tone values to interface roles and tests specific text and control pairings.
Where can I convert HEX values and test contrast?
The ColorIndicator HEX to RGB Converter also displays HSL. Use the Contrast Checker to test the exact foreground and background values in your design.
Use the HEX to RGB Converter for RGB and HSL values, then test your chosen foreground and background in the Contrast Checker.