What are the hex codes in the Grounded Terracotta & Clay palette?

The Grounded Terracotta & Clay color palette consists of Lilac #DF9BAB, Terracotta #C98193, Clay #AC697E, Chestnut #8B5366.

How should I use the Grounded Terracotta & Clay palette on a website?

Use Lilac #DF9BAB as the background, Chestnut #8B5366 for text, Terracotta #C98193 for buttons and links, and Clay #AC697E for accents. No pair inside the palette reaches 4.5:1, so add black or white for body text.

Which colors in Grounded Terracotta & Clay have enough contrast for text?

The highest-contrast pair is #DF9BAB on #8B5366 with a ratio of 2.67:1, which does not meet WCAG AA; add a darker or lighter neutral for body text.

#DF9BABLilac

#C98193Terracotta

#AC697EClay

#8B5366Chestnut

Grounded Terracotta & Clay color palette

Muted Warm Pink Brown

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Lilac	`#DF9BAB`	`rgb(223, 155, 171)`	`hsl(346, 52%, 74%)`	`oklch(76.0% 0.084 4)`
Terracotta	`#C98193`	`rgb(201, 129, 147)`	`hsl(345, 40%, 65%)`	`oklch(68.3% 0.091 4)`
Clay	`#AC697E`	`rgb(172, 105, 126)`	`hsl(341, 29%, 54%)`	`oklch(60.0% 0.089 360)`
Chestnut	`#8B5366`	`rgb(139, 83, 102)`	`hsl(340, 25%, 44%)`	`oklch(51.2% 0.078 358)`

Why it works and how to use it

Grounded Terracotta & Clay is a monochromatic color palette tagged muted, warm, pink. All four colors sit within 6° of hue, so the scheme reads as one color explored across light and dark. Neither washed out nor loud, it adapts to most contexts. The overall temperature is warm.

With 4 chromatic colors, Terracotta takes the lead while the rest support. Lightness runs from 44% to 74%. Well suited to websites, presentations and branding.

Background: Lilac (#DF9BAB) is the lightest color, so it belongs on large surfaces.
Text: Chestnut (#8B5366) on #DF9BAB gives 2.67:1, so pair it with a darker neutral for body copy.
Primary: Terracotta (#C98193) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Clay (#AC697E) for highlights, badges and hover states.

No pair inside the palette reaches 4.5:1, so add black or white for body text.

Preview on a real UI see how the palette feels in context

BrandFeaturesPricingBlogGet started

Design faster with Grounded Terracotta & Clay

A palette preview that turns four colors into a page, so you can judge hierarchy, contrast and mood before you commit.

Primary action Secondary

Card title

Roles are assigned by lightness.

Color blindness simulation

#DF9BAB

#C98193

#AC697E

#8B5366

Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.

Palette card

Contrast check WCAG ratios between palette colors

Pair	Sample	Ratio	Level
`#DF9BAB` on `#8B5366`	Aa	2.67:1	Fail
`#C98193` on `#8B5366`	Aa	2:1	Fail
`#DF9BAB` on `#AC697E`	Aa	1.85:1	Fail
`#AC697E` on `#8B5366`	Aa	1.44:1	Fail
`#C98193` on `#AC697E`	Aa	1.39:1	Fail
`#DF9BAB` on `#C98193`	Aa	1.34:1	Fail

Similar palettes 24 more in this mood