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

The Fresh Vanilla & Cadet color palette consists of Obsidian #050915, Charcoal #314E53, Cadet #5C9188, Vanilla #D1F0AB.

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

Use Vanilla #D1F0AB as the background, Obsidian #050915 for text, Charcoal #314E53 for buttons and links, and Cadet #5C9188 for accents. 3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Obsidian on Vanilla at 15.87:1.

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

The highest-contrast pair is #050915 on #D1F0AB with a ratio of 15.87:1, which passes WCAG AA for normal text.

#050915Obsidian

#314E53Charcoal

#5C9188Cadet

#D1F0ABVanilla

Fresh Vanilla & Cadet color palette

Space Dark Muted Minimal Black Beige

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Obsidian	`#050915`	`rgb(5, 9, 21)`	`hsl(225, 62%, 5%)`	`oklch(14.2% 0.028 266)`
Charcoal	`#314E53`	`rgb(49, 78, 83)`	`hsl(189, 26%, 26%)`	`oklch(40.3% 0.036 209)`
Cadet	`#5C9188`	`rgb(92, 145, 136)`	`hsl(170, 22%, 46%)`	`oklch(61.7% 0.058 182)`
Vanilla	`#D1F0AB`	`rgb(209, 240, 171)`	`hsl(87, 70%, 81%)`	`oklch(91.6% 0.096 128)`

Why it works and how to use it

Fresh Vanilla & Cadet is a dark, split color palette tagged space, dark, muted. The hues span about 102°, enough contrast to create a focal point without the harshness of true complements. Neither washed out nor loud, it adapts to most contexts. The overall temperature is cool.

With 3 chromatic colors, Charcoal takes the lead while the rest support. Lightness runs from 5% to 81%. Well suited to dark-mode interfaces and gaming.

Background: Vanilla (#D1F0AB) is the lightest color, so it belongs on large surfaces.
Text: Obsidian (#050915) on #D1F0AB gives 15.87:1, passing WCAG AAA.
Primary: Charcoal (#314E53) is the most saturated mid-tone; use it for buttons and links (7.15:1 against the background, fine for UI elements).
Accent: Cadet (#5C9188) for highlights, badges and hover states.

3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Obsidian on Vanilla at 15.87:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Fresh 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

#050915

#314E53

#5C9188

#D1F0AB

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
`#050915` on `#D1F0AB`	Aa	15.87:1	AAA
`#314E53` on `#D1F0AB`	Aa	7.15:1	AAA
`#050915` on `#5C9188`	Aa	5.55:1	AA
`#5C9188` on `#D1F0AB`	Aa	2.86:1	Fail
`#314E53` on `#5C9188`	Aa	2.5:1	Fail
`#050915` on `#314E53`	Aa	2.22:1	Fail

Similar palettes 24 more in this mood