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

The Mustard & Vanilla Mood color palette consists of Snow #FFF8F0, Vanilla #D3E7AE, Mustard #C3B200, Jet #3A2838.

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

Use Snow #FFF8F0 as the background, Jet #3A2838 for text, Mustard #C3B200 for buttons and links, and Vanilla #D3E7AE for accents. 3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Snow on Jet at 12.94:1.

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

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

#FFF8F0Snow

#D3E7AEVanilla

#C3B200Mustard

#3A2838Jet

Mustard & Vanilla Mood color palette

Modern White Beige Yellow

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Snow	`#FFF8F0`	`rgb(255, 248, 240)`	`hsl(32, 100%, 97%)`	`oklch(98.2% 0.013 71)`
Vanilla	`#D3E7AE`	`rgb(211, 231, 174)`	`hsl(81, 54%, 79%)`	`oklch(89.9% 0.078 124)`
Mustard	`#C3B200`	`rgb(195, 178, 0)`	`hsl(55, 100%, 38%)`	`oklch(75.4% 0.158 103)`
Jet	`#3A2838`	`rgb(58, 40, 56)`	`hsl(307, 18%, 19%)`	`oklch(30.5% 0.038 330)`

Why it works and how to use it

Mustard & Vanilla Mood is a vivid complementary color palette tagged modern, white, beige. Vanilla and Jet 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. The overall temperature is warm.

With 3 chromatic colors, Mustard takes the lead while the rest support. Lightness runs from 19% to 97%. Well suited to websites, presentations and branding.

Background: Snow (#FFF8F0) is the lightest color, so it belongs on large surfaces.
Text: Jet (#3A2838) on #FFF8F0 gives 12.94:1, passing WCAG AAA.
Primary: Mustard (#C3B200) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Vanilla (#D3E7AE) for highlights, badges and hover states.

3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Snow on Jet at 12.94:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Mustard & Vanilla 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

#FFF8F0

#D3E7AE

#C3B200

#3A2838

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
`#FFF8F0` on `#3A2838`	Aa	12.94:1	AAA
`#D3E7AE` on `#3A2838`	Aa	10.26:1	AAA
`#C3B200` on `#3A2838`	Aa	6.29:1	AA
`#FFF8F0` on `#C3B200`	Aa	2.06:1	Fail
`#D3E7AE` on `#C3B200`	Aa	1.63:1	Fail
`#FFF8F0` on `#D3E7AE`	Aa	1.26:1	Fail

Similar palettes 24 more in this mood