What are the hex codes in the True Cobalt & Obsidian palette?

The True Cobalt & Obsidian color palette consists of Fog #D1D2D4, Ash #B0B3B8, Cobalt #0C37C1, Obsidian #01030D.

How should I use the True Cobalt & Obsidian palette on a website?

Use Fog #D1D2D4 as the background, Obsidian #01030D for text, Cobalt #0C37C1 for buttons and links, and Ash #B0B3B8 for accents. 3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Fog on Obsidian at 13.61:1.

Which colors in True Cobalt & Obsidian have enough contrast for text?

The highest-contrast pair is #D1D2D4 on #01030D with a ratio of 13.61:1, which passes WCAG AA for normal text.

#D1D2D4Fog

#B0B3B8Ash

#0C37C1Cobalt

#01030DObsidian

True Cobalt & Obsidian color palette

Modern Dark Minimal Gray Blue Black

Open in generator

Ask AI about this palette: ChatGPT Claude Perplexity

True Cobalt & Obsidian is a neutral-based color palette tagged modern, dark, minimal. Cobalt is the only saturated color here, so it does all the talking against a neutral base. Neither washed out nor loud, it adapts to most contexts. The overall temperature is cool.

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Fog	`#D1D2D4`	`rgb(209, 210, 212)`	`hsl(220, 3%, 83%)`	`oklch(86.4% 0.003 265)`
Ash	`#B0B3B8`	`rgb(176, 179, 184)`	`hsl(218, 5%, 71%)`	`oklch(76.6% 0.008 261)`
Cobalt	`#0C37C1`	`rgb(12, 55, 193)`	`hsl(226, 88%, 40%)`	`oklch(42.2% 0.217 264)`
Obsidian	`#01030D`	`rgb(1, 3, 13)`	`hsl(230, 86%, 3%)`	`oklch(10.1% 0.031 264)`

Why it works and how to use it

The palette holds together thanks to its neutral backbone and a strong light-to-dark ladder (83% down to 3% lightness). A natural fit for websites, presentations and branding.

Pair	Sample	Ratio	Level
`#D1D2D4` on `#01030D`	Aa	13.61:1	AAA
`#B0B3B8` on `#01030D`	Aa	9.79:1	AAA
`#D1D2D4` on `#0C37C1`	Aa	5.95:1	AA
`#B0B3B8` on `#0C37C1`	Aa	4.28:1	AA large only
`#0C37C1` on `#01030D`	Aa	2.29:1	Fail
`#D1D2D4` on `#B0B3B8`	Aa	1.39:1	Fail

True Cobalt & Obsidian color palette

Color codes click any value to copy

Why it works and how to use it

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

Design faster with True Cobalt & Obsidian

Color blindness simulation

Contrast check WCAG ratios between palette colors

Similar palettes 24 more in this mood