What are the hex codes in the Urban Sand & Sage palette?

The Urban Sand & Sage color palette consists of Storm #41726E, Sage #8CBBAA, Bone #D8DDD8, Sand #D8AC63.

How should I use the Urban Sand & Sage palette on a website?

Use Bone #D8DDD8 as the background, Storm #41726E for text, Sand #D8AC63 for buttons and links, and Sage #8CBBAA for accents. No pair inside the palette reaches 4.5:1, so add black or white for body text.

Which colors in Urban Sand & Sage have enough contrast for text?

The highest-contrast pair is #41726E on #D8DDD8 with a ratio of 3.96:1, which passes WCAG AA for large text only.

#41726EStorm

#8CBBAASage

#D8DDD8Bone

#D8AC63Sand

Urban Sand & Sage color palette

Modern Gray Beige

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Storm	`#41726E`	`rgb(65, 114, 110)`	`hsl(175, 27%, 35%)`	`oklch(51.6% 0.054 189)`
Sage	`#8CBBAA`	`rgb(140, 187, 170)`	`hsl(158, 26%, 64%)`	`oklch(75.4% 0.056 171)`
Bone	`#D8DDD8`	`rgb(216, 221, 216)`	`hsl(120, 7%, 86%)`	`oklch(89.2% 0.009 146)`
Sand	`#D8AC63`	`rgb(216, 172, 99)`	`hsl(37, 60%, 62%)`	`oklch(76.9% 0.105 79)`

Why it works and how to use it

Urban Sand & Sage is a complementary color palette tagged modern, gray, beige. Storm and Sand sit nearly opposite on the color wheel, so the pairing has real energy; keep one as the accent. Neither washed out nor loud, it adapts to most contexts. Warm and cool hues are mixed, which adds depth.

With 3 chromatic colors, Sand takes the lead while the rest support. Lightness runs from 35% to 86%. Well suited to websites, presentations and branding.

Background: Bone (#D8DDD8) is the lightest color, so it belongs on large surfaces.
Text: Storm (#41726E) on #D8DDD8 gives 3.96:1, enough for large headings only.
Primary: Sand (#D8AC63) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Sage (#8CBBAA) 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 Urban Sand & Sage

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

#41726E

#8CBBAA

#D8DDD8

#D8AC63

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
`#41726E` on `#D8DDD8`	Aa	3.96:1	AA large only
`#41726E` on `#D8AC63`	Aa	2.59:1	Fail
`#41726E` on `#8CBBAA`	Aa	2.54:1	Fail
`#8CBBAA` on `#D8DDD8`	Aa	1.56:1	Fail
`#D8DDD8` on `#D8AC63`	Aa	1.53:1	Fail
`#8CBBAA` on `#D8AC63`	Aa	1.02:1	Fail

Similar palettes 24 more in this mood