Clay

#b66a50

Dusty terracotta orange for calm, muted surfaces

Save
Share

About Clay

Clay sits between the restlessness of and the restraint of , but it's quieter than both. It's warmer and lighter than , with enough saturation to feel present without the muted earthiness that keeps 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 does, lands softer on cream and warm grays than , and reads less aged than . 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.

Gradient preview

See how this color looks in an animated mesh gradient.

Conversions

Click any value to copy.

Need this programmatically? Color API

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

Aa
4.06:1FailAA Large

On Gray 100 #f5f5f5

Aa
3.73:1FailAA Large

On Gray 900 #18181b

Aa
4.36:1FailAA Large

On Black #000000

Aa
5.17:1AAAAA Large

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

Complementary
Analogous
Triadic
Split Complementary
Tetradic

Suggested palettes

Palettes built around this color.

4 colors
3 colors
4 colors
4 colors

Community palettes

Published palettes that include this color.

Similar colors

#b2654e
#bb6b41
#bb715b
#ad654c
#ab6f60

Create a gradient with Clay

Open the generator with this color pre-loaded.

Start creating