What are the hex codes in the Hazelnut & Dusk Dream palette?

The Hazelnut & Dusk Dream color palette consists of Space #1C2650, Dusk #47558E, Hazelnut #BB8B51, Bone #DDD7CC.

How should I use the Hazelnut & Dusk Dream palette on a website?

Use Bone #DDD7CC as the background, Space #1C2650 for text, Hazelnut #BB8B51 for buttons and links, and Dusk #47558E for accents. 3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Space on Bone at 10.17:1.

Which colors in Hazelnut & Dusk Dream have enough contrast for text?

The highest-contrast pair is #1C2650 on #DDD7CC with a ratio of 10.17:1, which passes WCAG AA for normal text.

#1C2650Space

#47558EDusk

#BB8B51Hazelnut

#DDD7CCBone

Hazelnut & Dusk Dream color palette

Dark Muted Blue

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Space	`#1C2650`	`rgb(28, 38, 80)`	`hsl(228, 48%, 21%)`	`oklch(28.5% 0.078 271)`
Dusk	`#47558E`	`rgb(71, 85, 142)`	`hsl(228, 33%, 42%)`	`oklch(46.5% 0.094 272)`
Hazelnut	`#BB8B51`	`rgb(187, 139, 81)`	`hsl(33, 44%, 53%)`	`oklch(67.1% 0.095 70)`
Bone	`#DDD7CC`	`rgb(221, 215, 204)`	`hsl(39, 20%, 83%)`	`oklch(88.1% 0.016 83)`

Why it works and how to use it

Hazelnut & Dusk Dream is a complementary color palette tagged dark, muted, blue. Near-complementary hues (about 171° apart) make this a high-contrast, attention-grabbing combination. Saturation is moderate, which keeps it flexible for both interfaces and print. Warm and cool hues are mixed, which adds depth.

With 4 chromatic colors, Hazelnut takes the lead while the rest support. Lightness runs from 21% to 83%. Well suited to websites, presentations and branding.

Background: Bone (#DDD7CC) is the lightest color, so it belongs on large surfaces.
Text: Space (#1C2650) on #DDD7CC gives 10.17:1, passing WCAG AAA.
Primary: Hazelnut (#BB8B51) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Dusk (#47558E) for highlights, badges and hover states.

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

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

BrandFeaturesPricingBlogGet started

Design faster with Hazelnut & Dusk Dream

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

#1C2650

#47558E

#BB8B51

#DDD7CC

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
`#1C2650` on `#DDD7CC`	Aa	10.17:1	AAA
`#47558E` on `#DDD7CC`	Aa	4.96:1	AA
`#1C2650` on `#BB8B51`	Aa	4.8:1	AA
`#47558E` on `#BB8B51`	Aa	2.34:1	Fail
`#BB8B51` on `#DDD7CC`	Aa	2.12:1	Fail
`#1C2650` on `#47558E`	Aa	2.05:1	Fail

Similar palettes 24 more in this mood