What are the hex codes in the Iron & Dusk Haze palette?

The Iron & Dusk Haze color palette consists of Iron #403351, Dusk #5B546B, Heather #ACA1B7, Lavender #F3EAFF.

How should I use the Iron & Dusk Haze palette on a website?

Use Lavender #F3EAFF as the background, Iron #403351 for text, Heather #ACA1B7 for buttons and links, and Dusk #5B546B for accents. 3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Iron on Lavender at 9.96:1.

Which colors in Iron & Dusk Haze have enough contrast for text?

The highest-contrast pair is #403351 on #F3EAFF with a ratio of 9.96:1, which passes WCAG AA for normal text.

#403351Iron

#5B546BDusk

#ACA1B7Heather

#F3EAFFLavender

Iron & Dusk Haze color palette

Muted Minimal White

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Iron	`#403351`	`rgb(64, 51, 81)`	`hsl(266, 23%, 26%)`	`oklch(34.9% 0.054 304)`
Dusk	`#5B546B`	`rgb(91, 84, 107)`	`hsl(258, 12%, 37%)`	`oklch(46.1% 0.038 299)`
Heather	`#ACA1B7`	`rgb(172, 161, 183)`	`hsl(270, 13%, 67%)`	`oklch(72.5% 0.034 308)`
Lavender	`#F3EAFF`	`rgb(243, 234, 255)`	`hsl(266, 100%, 96%)`	`oklch(95.0% 0.030 305)`

Why it works and how to use it

Iron & Dusk Haze is a neutral-based color palette tagged muted, minimal, white. Built almost entirely from neutrals, with Lavender (#F3EAFF) as the single point of color. Saturation is moderate, which keeps it flexible for both interfaces and print. The overall temperature is cool.

Two of the four colors are near-neutral, which leaves room for Heather to lead. Lightness runs from 26% to 96%. Well suited to websites, presentations and branding.

Background: Lavender (#F3EAFF) is the lightest color, so it belongs on large surfaces.
Text: Iron (#403351) on #F3EAFF gives 9.96:1, passing WCAG AAA.
Primary: Heather (#ACA1B7) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Dusk (#5B546B) for highlights, badges and hover states.

3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Iron on Lavender at 9.96:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Iron & Dusk Haze

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

#403351

#5B546B

#ACA1B7

#F3EAFF

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
`#403351` on `#F3EAFF`	Aa	9.96:1	AAA
`#5B546B` on `#F3EAFF`	Aa	6.16:1	AA
`#403351` on `#ACA1B7`	Aa	4.72:1	AA
`#5B546B` on `#ACA1B7`	Aa	2.92:1	Fail
`#ACA1B7` on `#F3EAFF`	Aa	2.11:1	Fail
`#403351` on `#5B546B`	Aa	1.62:1	Fail

Similar palettes 24 more in this mood