What are the hex codes in the Mustard & Dusk Echo palette?

The Mustard & Dusk Echo color palette consists of Space #3B1B5D, Dusk #66428B, Mustard #D2A400, Bone #DFDDD8.

How should I use the Mustard & Dusk Echo palette on a website?

Use Bone #DFDDD8 as the background, Space #3B1B5D for text, Mustard #D2A400 for buttons and links, and Dusk #66428B for accents. 3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Space on Bone at 10.31:1.

Which colors in Mustard & Dusk Echo have enough contrast for text?

The highest-contrast pair is #3B1B5D on #DFDDD8 with a ratio of 10.31:1, which passes WCAG AA for normal text.

#3B1B5DSpace

#66428BDusk

#D2A400Mustard

#DFDDD8Bone

Mustard & Dusk Echo color palette

Modern Blue Yellow

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Space	`#3B1B5D`	`rgb(59, 27, 93)`	`hsl(269, 55%, 24%)`	`oklch(30.6% 0.113 302)`
Dusk	`#66428B`	`rgb(102, 66, 139)`	`hsl(270, 36%, 40%)`	`oklch(45.4% 0.120 305)`
Mustard	`#D2A400`	`rgb(210, 164, 0)`	`hsl(47, 100%, 41%)`	`oklch(74.0% 0.151 88)`
Bone	`#DFDDD8`	`rgb(223, 221, 216)`	`hsl(43, 10%, 86%)`	`oklch(89.8% 0.007 89)`

Why it works and how to use it

Mustard & Dusk Echo is a complementary color palette tagged modern, blue, yellow. Space and Mustard 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, Mustard takes the lead while the rest support. Lightness runs from 24% to 86%. Well suited to websites, presentations and branding.

Background: Bone (#DFDDD8) is the lightest color, so it belongs on large surfaces.
Text: Space (#3B1B5D) on #DFDDD8 gives 10.31:1, passing WCAG AAA.
Primary: Mustard (#D2A400) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Dusk (#66428B) 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.31:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Mustard & Dusk Echo

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

#3B1B5D

#66428B

#D2A400

#DFDDD8

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
`#3B1B5D` on `#DFDDD8`	Aa	10.31:1	AAA
`#3B1B5D` on `#D2A400`	Aa	6.03:1	AA
`#66428B` on `#DFDDD8`	Aa	5.69:1	AA
`#66428B` on `#D2A400`	Aa	3.33:1	AA large only
`#3B1B5D` on `#66428B`	Aa	1.81:1	Fail
`#D2A400` on `#DFDDD8`	Aa	1.71:1	Fail

Similar palettes 24 more in this mood