What are the hex codes in the Cheerful Vanilla & Cadet palette?

The Cheerful Vanilla & Cadet color palette consists of Storm #3E5F6C, Cadet #47B4A5, Snow #F1FDFA, Vanilla #FFD97F.

How should I use the Cheerful Vanilla & Cadet palette on a website?

Use Snow #F1FDFA as the background, Storm #3E5F6C for text, Vanilla #FFD97F for buttons and links, and Cadet #47B4A5 for accents. 2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Storm on Snow at 6.6:1.

Which colors in Cheerful Vanilla & Cadet have enough contrast for text?

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

#3E5F6CStorm

#47B4A5Cadet

#F1FDFASnow

#FFD97FVanilla

Cheerful Vanilla & Cadet color palette

Ocean Gray Teal White Beige

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Storm	`#3E5F6C`	`rgb(62, 95, 108)`	`hsl(197, 27%, 33%)`	`oklch(46.5% 0.044 225)`
Cadet	`#47B4A5`	`rgb(71, 180, 165)`	`hsl(172, 43%, 49%)`	`oklch(70.3% 0.102 183)`
Snow	`#F1FDFA`	`rgb(241, 253, 250)`	`hsl(165, 75%, 97%)`	`oklch(98.4% 0.013 179)`
Vanilla	`#FFD97F`	`rgb(255, 217, 127)`	`hsl(42, 100%, 75%)`	`oklch(89.9% 0.117 87)`

Why it works and how to use it

Cheerful Vanilla & Cadet is a complementary color palette tagged ocean, gray, teal. Storm and Vanilla 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, Vanilla takes the lead while the rest support. Lightness runs from 33% to 97%. Well suited to websites, presentations and branding.

Background: Snow (#F1FDFA) is the lightest color, so it belongs on large surfaces.
Text: Storm (#3E5F6C) on #F1FDFA gives 6.6:1, passing WCAG AA.
Primary: Vanilla (#FFD97F) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Cadet (#47B4A5) for highlights, badges and hover states.

2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Storm on Snow at 6.6:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Cheerful Vanilla & Cadet

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

#3E5F6C

#47B4A5

#F1FDFA

#FFD97F

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
`#3E5F6C` on `#F1FDFA`	Aa	6.6:1	AA
`#3E5F6C` on `#FFD97F`	Aa	5.06:1	AA
`#3E5F6C` on `#47B4A5`	Aa	2.73:1	Fail
`#47B4A5` on `#F1FDFA`	Aa	2.42:1	Fail
`#47B4A5` on `#FFD97F`	Aa	1.86:1	Fail
`#F1FDFA` on `#FFD97F`	Aa	1.3:1	Fail

Similar palettes 24 more in this mood