Clay
#b66a50
Dusty terracotta orange for calm, muted surfaces
About Clay
Clay sits between the restlessness of Campfire and the restraint of Bronzed, but it's quieter than both. It's warmer and lighter than Bronzed, with enough saturation to feel present without the muted earthiness that keeps Bronzed looking reserved. This is the orange that doesn't apologize for being orange, but it doesn't shout either.
You'll use this in editorial layouts, fashion apps, and interface headers where you need warmth that feels approachable but still grounded. It holds up on light backgrounds better than Campfire does, lands softer on cream and warm grays than Barbecue, and reads less aged than Bronzed. It's the one I reach for when orange needs to feel both energetic and settled at the same time, active without the urgency.
Pair it tight with warm neutrals and it stays cohesive. Against cool grays or cool whites it can drift toward salmon territory, so know your background before you commit. That said, on the right surface it's genuinely hard to mess with.
Code snippets
Copy this color into your project.
Contrast checker
WCAG 2.1 contrast ratios. AA requires 4.5:1 for normal text, 3:1 for large. AAA requires 7:1 / 4.5:1.
On White #ffffff
On Gray 100 #f5f5f5
On Gray 900 #18181b
On Black #000000
Variations
Shades
Darker variations, created by mixing toward black.
Tints
Lighter variations, created by mixing toward white.
Tones
Muted variations, created by reducing saturation.
Hues
Hue rotations around the color wheel.
Temperatures
Warm and cool shifts of this color.
Color harmonies
Suggested palettes
Palettes built around this color.
Community palettes
Published palettes that include this color.