What are the hex codes in the Mustard & Lapis Mood palette?

The Mustard & Lapis Mood color palette consists of Mustard #ECB400, Putty #C7BE9D, Lapis #00559E, Dusk #3E586F.

How should I use the Mustard & Lapis Mood palette on a website?

Use Putty #C7BE9D as the background, Lapis #00559E for text, Mustard #ECB400 for buttons and links, and Dusk #3E586F for accents. No pair inside the palette reaches 4.5:1, so add black or white for body text.

Which colors in Mustard & Lapis Mood have enough contrast for text?

The highest-contrast pair is #C7BE9D on #00559E with a ratio of 4.04:1, which passes WCAG AA for large text only.

#ECB400Mustard

#C7BE9DPutty

#00559ELapis

#3E586FDusk

Mustard & Lapis Mood color palette

Modern Yellow Blue

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Mustard	`#ECB400`	`rgb(236, 180, 0)`	`hsl(46, 100%, 46%)`	`oklch(79.9% 0.164 86)`
Putty	`#C7BE9D`	`rgb(199, 190, 157)`	`hsl(47, 27%, 70%)`	`oklch(80.0% 0.046 95)`
Lapis	`#00559E`	`rgb(0, 85, 158)`	`hsl(208, 100%, 31%)`	`oklch(44.9% 0.137 253)`
Dusk	`#3E586F`	`rgb(62, 88, 111)`	`hsl(208, 28%, 34%)`	`oklch(44.9% 0.049 246)`

Why it works and how to use it

Mustard & Lapis Mood is a vivid complementary color palette tagged modern, yellow, blue. Mustard and Dusk sit nearly opposite on the color wheel, so the pairing has real energy; keep one as the accent. These are bold, punchy colors that need generous white space around them. Warm and cool hues are mixed, which adds depth.

With 4 chromatic colors, Mustard takes the lead while the rest support. Lightness runs from 31% to 70%. Well suited to websites, presentations and branding.

Background: Putty (#C7BE9D) is the lightest color, so it belongs on large surfaces.
Text: Lapis (#00559E) on #C7BE9D gives 4.04:1, enough for large headings only.
Primary: Mustard (#ECB400) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Dusk (#3E586F) for highlights, badges and hover states.

No pair inside the palette reaches 4.5:1, so add black or white for body text.

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

BrandFeaturesPricingBlogGet started

Design faster with Mustard & Lapis Mood

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

#ECB400

#C7BE9D

#00559E

#3E586F

Color-blind check: under tritanopia, Lapis and Dusk become hard to tell apart, so do not rely on that pair alone to carry meaning.

Palette card

Contrast check WCAG ratios between palette colors

Pair	Sample	Ratio	Level
`#C7BE9D` on `#00559E`	Aa	4.04:1	AA large only
`#C7BE9D` on `#3E586F`	Aa	3.99:1	AA large only
`#ECB400` on `#00559E`	Aa	3.97:1	AA large only
`#ECB400` on `#3E586F`	Aa	3.92:1	AA large only
`#ECB400` on `#C7BE9D`	Aa	1.02:1	Fail
`#00559E` on `#3E586F`	Aa	1.01:1	Fail

Similar palettes 24 more in this mood