What are the hex codes in the Tea Stain palette?

The Tea Stain color palette consists of Cocoa #7A5C4A, Hazelnut #B08F73, Oat #E3CDB0, Linen #F8F1E6.

How should I use the Tea Stain palette on a website?

Use Linen #F8F1E6 as the background, Cocoa #7A5C4A for text, Oat #E3CDB0 for buttons and links, and Hazelnut #B08F73 for accents. 1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Cocoa on Linen at 5.41:1.

Which colors in Tea Stain have enough contrast for text?

The highest-contrast pair is #7A5C4A on #F8F1E6 with a ratio of 5.41:1, which passes WCAG AA for normal text.

#7A5C4ACocoa

#B08F73Hazelnut

#E3CDB0Oat

#F8F1E6Linen

Tea Stain color palette

Vintage Muted Earthy Brown Beige White

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Cocoa	`#7A5C4A`	`rgb(122, 92, 74)`	`hsl(22, 24%, 38%)`	`oklch(50.1% 0.048 52)`
Hazelnut	`#B08F73`	`rgb(176, 143, 115)`	`hsl(28, 28%, 57%)`	`oklch(67.3% 0.056 62)`
Oat	`#E3CDB0`	`rgb(227, 205, 176)`	`hsl(34, 48%, 79%)`	`oklch(85.9% 0.046 75)`
Linen	`#F8F1E6`	`rgb(248, 241, 230)`	`hsl(37, 56%, 94%)`	`oklch(96.1% 0.016 79)`

Why it works and how to use it

Tea Stain is a monochromatic color palette tagged vintage, muted, earthy. All four colors sit within 15° 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, Oat takes the lead while the rest support. Lightness runs from 38% to 94%. Well suited to wellness, organic and outdoor brands.

Background: Linen (#F8F1E6) is the lightest color, so it belongs on large surfaces.
Text: Cocoa (#7A5C4A) on #F8F1E6 gives 5.41:1, passing WCAG AA.
Primary: Oat (#E3CDB0) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Hazelnut (#B08F73) for highlights, badges and hover states.

1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Cocoa on Linen at 5.41:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Tea Stain

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

#7A5C4A

#B08F73

#E3CDB0

#F8F1E6

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
`#7A5C4A` on `#F8F1E6`	Aa	5.41:1	AA
`#7A5C4A` on `#E3CDB0`	Aa	3.94:1	AA large only
`#B08F73` on `#F8F1E6`	Aa	2.67:1	Fail
`#7A5C4A` on `#B08F73`	Aa	2.03:1	Fail
`#B08F73` on `#E3CDB0`	Aa	1.94:1	Fail
`#E3CDB0` on `#F8F1E6`	Aa	1.37:1	Fail

Similar palettes 24 more in this mood