What are the hex codes in the Dusk & Heather Hour palette?

The Dusk & Heather Hour color palette consists of Space #292647, Dusk #5B5890, Heather #A9A3D1, Frost #F1F0F7.

How should I use the Dusk & Heather Hour palette on a website?

Use Frost #F1F0F7 as the background, Space #292647 for text, Heather #A9A3D1 for buttons and links, and Dusk #5B5890 for accents. 3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Space on Frost at 12.68:1.

Which colors in Dusk & Heather Hour have enough contrast for text?

The highest-contrast pair is #292647 on #F1F0F7 with a ratio of 12.68:1, which passes WCAG AA for normal text.

#292647Space

#5B5890Dusk

#A9A3D1Heather

#F1F0F7Frost

Dusk & Heather Hour color palette

Cold Tech Dark Muted White

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Space	`#292647`	`rgb(41, 38, 71)`	`hsl(245, 30%, 21%)`	`oklch(28.9% 0.059 286)`
Dusk	`#5B5890`	`rgb(91, 88, 144)`	`hsl(243, 24%, 45%)`	`oklch(48.8% 0.089 285)`
Heather	`#A9A3D1`	`rgb(169, 163, 209)`	`hsl(248, 33%, 73%)`	`oklch(73.6% 0.066 291)`
Frost	`#F1F0F7`	`rgb(241, 240, 247)`	`hsl(249, 30%, 95%)`	`oklch(95.8% 0.009 293)`

Why it works and how to use it

Dusk & Heather Hour is a monochromatic color palette tagged cold, tech, dark. All four colors sit within 5° 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 cool.

With 3 chromatic colors, Heather takes the lead while the rest support. Lightness runs from 21% to 95%. Well suited to a SaaS landing page or dashboard.

Background: Frost (#F1F0F7) is the lightest color, so it belongs on large surfaces.
Text: Space (#292647) on #F1F0F7 gives 12.68:1, passing WCAG AAA.
Primary: Heather (#A9A3D1) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Dusk (#5B5890) for highlights, badges and hover states.

3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Space on Frost at 12.68:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Dusk & Heather Hour

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

#292647

#5B5890

#A9A3D1

#F1F0F7

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
`#292647` on `#F1F0F7`	Aa	12.68:1	AAA
`#292647` on `#A9A3D1`	Aa	6.05:1	AA
`#5B5890` on `#F1F0F7`	Aa	5.72:1	AA
`#5B5890` on `#A9A3D1`	Aa	2.73:1	Fail
`#292647` on `#5B5890`	Aa	2.22:1	Fail
`#A9A3D1` on `#F1F0F7`	Aa	2.1:1	Fail

Similar palettes 24 more in this mood