What are the hex codes in the Clay Hazelnut & Teal palette?

The Clay Hazelnut & Teal color palette consists of Espresso #432818, Teal #007A82, Hazelnut #BB9457, Peach #FFE6A7.

How should I use the Clay Hazelnut & Teal palette on a website?

Use Peach #FFE6A7 as the background, Espresso #432818 for text, Teal #007A82 for buttons and links, and Hazelnut #BB9457 for accents. 2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Espresso on Peach at 11.01:1.

Which colors in Clay Hazelnut & Teal have enough contrast for text?

The highest-contrast pair is #432818 on #FFE6A7 with a ratio of 11.01:1, which passes WCAG AA for normal text.

#432818Espresso

#007A82Teal

#BB9457Hazelnut

#FFE6A7Peach

Clay Hazelnut & Teal color palette

Muted Brown Teal Beige

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Espresso	`#432818`	`rgb(67, 40, 24)`	`hsl(22, 47%, 18%)`	`oklch(30.7% 0.048 51)`
Teal	`#007A82`	`rgb(0, 122, 130)`	`hsl(184, 100%, 25%)`	`oklch(52.8% 0.090 203)`
Hazelnut	`#BB9457`	`rgb(187, 148, 87)`	`hsl(37, 42%, 54%)`	`oklch(69.0% 0.092 77)`
Peach	`#FFE6A7`	`rgb(255, 230, 167)`	`hsl(43, 100%, 83%)`	`oklch(93.1% 0.084 89)`

Why it works and how to use it

Clay Hazelnut & Teal is a vivid complementary color palette tagged muted, brown, teal. Espresso and Peach sit nearly opposite on the color wheel, so the pairing has real energy; keep one as the accent. These are bold, punchy colors that need generous white space around them. Warm and cool hues are mixed, which adds depth.

With 4 chromatic colors, Teal takes the lead while the rest support. Lightness runs from 18% to 83%. Well suited to websites, presentations and branding.

Background: Peach (#FFE6A7) is the lightest color, so it belongs on large surfaces.
Text: Espresso (#432818) on #FFE6A7 gives 11.01:1, passing WCAG AAA.
Primary: Teal (#007A82) is the most saturated mid-tone; use it for buttons and links (4.17:1 against the background, fine for UI elements).
Accent: Hazelnut (#BB9457) for highlights, badges and hover states.

2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Espresso on Peach at 11.01:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Clay Hazelnut & Teal

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

#432818

#007A82

#BB9457

#FFE6A7

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
`#432818` on `#FFE6A7`	Aa	11.01:1	AAA
`#432818` on `#BB9457`	Aa	4.81:1	AA
`#007A82` on `#FFE6A7`	Aa	4.17:1	AA large only
`#432818` on `#007A82`	Aa	2.64:1	Fail
`#BB9457` on `#FFE6A7`	Aa	2.29:1	Fail
`#007A82` on `#BB9457`	Aa	1.82:1	Fail

Similar palettes 24 more in this mood