What are the hex codes in the Dusty Rose & Iron Drift palette?

The Dusty Rose & Iron Drift color palette consists of Bone #DDD9D7, Dusty Rose #D2AEA9, Slate #7B8692, Iron #37404B.

How should I use the Dusty Rose & Iron Drift palette on a website?

Use Bone #DDD9D7 as the background, Iron #37404B for text, Dusty Rose #D2AEA9 for buttons and links, and Slate #7B8692 for accents. 2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Bone on Iron at 7.5:1.

Which colors in Dusty Rose & Iron Drift have enough contrast for text?

The highest-contrast pair is #DDD9D7 on #37404B with a ratio of 7.5:1, which passes WCAG AA for normal text.

#DDD9D7Bone

#D2AEA9Dusty Rose

#7B8692Slate

#37404BIron

Dusty Rose & Iron Drift color palette

Minimal Gray

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Bone	`#DDD9D7`	`rgb(221, 217, 215)`	`hsl(20, 8%, 85%)`	`oklch(88.8% 0.005 49)`
Dusty Rose	`#D2AEA9`	`rgb(210, 174, 169)`	`hsl(7, 31%, 74%)`	`oklch(78.1% 0.043 27)`
Slate	`#7B8692`	`rgb(123, 134, 146)`	`hsl(211, 10%, 53%)`	`oklch(61.5% 0.022 251)`
Iron	`#37404B`	`rgb(55, 64, 75)`	`hsl(213, 15%, 25%)`	`oklch(36.8% 0.022 254)`

Why it works and how to use it

Dusty Rose & Iron Drift is a muted neutral-based color palette tagged minimal, gray. Dusty Rose is the only saturated color here, so it does all the talking against a neutral base. Every color is softened, so it works well as a background system for text-heavy layouts.

Two of the four colors are near-neutral, which leaves room for Dusty Rose to lead. Lightness runs from 25% to 85%. Well suited to websites, presentations and branding.

Background: Bone (#DDD9D7) is the lightest color, so it belongs on large surfaces.
Text: Iron (#37404B) on #DDD9D7 gives 7.5:1, passing WCAG AAA.
Primary: Dusty Rose (#D2AEA9) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Slate (#7B8692) for highlights, badges and hover states.

2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Bone on Iron at 7.5:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Dusty Rose & Iron Drift

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

#DDD9D7

#D2AEA9

#7B8692

#37404B

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
`#DDD9D7` on `#37404B`	Aa	7.5:1	AAA
`#D2AEA9` on `#37404B`	Aa	5.19:1	AA
`#7B8692` on `#37404B`	Aa	2.84:1	Fail
`#DDD9D7` on `#7B8692`	Aa	2.64:1	Fail
`#D2AEA9` on `#7B8692`	Aa	1.83:1	Fail
`#DDD9D7` on `#D2AEA9`	Aa	1.44:1	Fail

Similar palettes 24 more in this mood