What are the hex codes in the Earthy Apricot & Sand palette?

The Earthy Apricot & Sand color palette consists of Shadow #7C7C62, Sand #BBB286, Apricot #FDCE9D, Linen #F5EEDF.

How should I use the Earthy Apricot & Sand palette on a website?

Use Linen #F5EEDF as the background, Shadow #7C7C62 for text, Apricot #FDCE9D for buttons and links, and Sand #BBB286 for accents. No pair inside the palette reaches 4.5:1, so add black or white for body text.

Which colors in Earthy Apricot & Sand have enough contrast for text?

The highest-contrast pair is #7C7C62 on #F5EEDF with a ratio of 3.7:1, which passes WCAG AA for large text only.

#7C7C62Shadow

#BBB286Sand

#FDCE9DApricot

#F5EEDFLinen

Earthy Apricot & Sand color palette

Warm Muted Brown Beige White

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Shadow	`#7C7C62`	`rgb(124, 124, 98)`	`hsl(60, 12%, 44%)`	`oklch(57.9% 0.038 108)`
Sand	`#BBB286`	`rgb(187, 178, 134)`	`hsl(50, 28%, 63%)`	`oklch(76.0% 0.060 98)`
Apricot	`#FDCE9D`	`rgb(253, 206, 157)`	`hsl(31, 96%, 80%)`	`oklch(88.1% 0.083 68)`
Linen	`#F5EEDF`	`rgb(245, 238, 223)`	`hsl(41, 52%, 92%)`	`oklch(95.1% 0.021 86)`

Why it works and how to use it

Earthy Apricot & Sand is a monochromatic color palette tagged warm, muted, brown. A monochromatic set: the same hue family from Shadow down to Linen. Saturation is moderate, which keeps it flexible for both interfaces and print. The overall temperature is warm.

With 3 chromatic colors, Apricot takes the lead while the rest support. Lightness runs from 44% to 92%. Well suited to websites, presentations and branding.

Background: Linen (#F5EEDF) is the lightest color, so it belongs on large surfaces.
Text: Shadow (#7C7C62) on #F5EEDF gives 3.7:1, enough for large headings only.
Primary: Apricot (#FDCE9D) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Sand (#BBB286) 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 Earthy Apricot & Sand

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

#7C7C62

#BBB286

#FDCE9D

#F5EEDF

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
`#7C7C62` on `#F5EEDF`	Aa	3.7:1	AA large only
`#7C7C62` on `#FDCE9D`	Aa	2.95:1	Fail
`#7C7C62` on `#BBB286`	Aa	2:1	Fail
`#BBB286` on `#F5EEDF`	Aa	1.85:1	Fail
`#BBB286` on `#FDCE9D`	Aa	1.47:1	Fail
`#FDCE9D` on `#F5EEDF`	Aa	1.25:1	Fail

Similar palettes 24 more in this mood