What are the hex codes in the Northern Lights palette?

The Northern Lights color palette consists of Obsidian #03071E, Peacock #0B525B, Cadet #1B998B, Mint #C2F970.

How should I use the Northern Lights palette on a website?

Use Mint #C2F970 as the background, Obsidian #03071E for text, Peacock #0B525B for buttons and links, and Cadet #1B998B for accents. 3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Obsidian on Mint at 16.22:1.

Which colors in Northern Lights have enough contrast for text?

The highest-contrast pair is #03071E on #C2F970 with a ratio of 16.22:1, which passes WCAG AA for normal text.

#03071EObsidian

#0B525BPeacock

#1B998BCadet

#C2F970Mint

Northern Lights color palette

Space Dark Cold Black Teal Green

Open in generator

Ask AI about this palette: ChatGPT Claude Perplexity

Northern Lights is a vivid dark, split color palette tagged space, dark, cold. The hues span about 103°, enough contrast to create a focal point without the harshness of true complements. These are bold, punchy colors that need generous white space around them. The overall temperature is cool.

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Obsidian	`#03071E`	`rgb(3, 7, 30)`	`hsl(231, 82%, 6%)`	`oklch(14.1% 0.051 268)`
Peacock	`#0B525B`	`rgb(11, 82, 91)`	`hsl(187, 78%, 20%)`	`oklch(40.3% 0.065 208)`
Cadet	`#1B998B`	`rgb(27, 153, 139)`	`hsl(173, 70%, 35%)`	`oklch(61.6% 0.104 183)`
Mint	`#C2F970`	`rgb(194, 249, 112)`	`hsl(84, 92%, 71%)`	`oklch(91.7% 0.176 128)`

Why it works and how to use it

The palette holds together thanks to its split hue relationship and a strong light-to-dark ladder (71% down to 6% lightness). A natural fit for dark-mode interfaces and gaming.

Pair	Sample	Ratio	Level
`#03071E` on `#C2F970`	Aa	16.22:1	AAA
`#0B525B` on `#C2F970`	Aa	7.2:1	AAA
`#03071E` on `#1B998B`	Aa	5.68:1	AA
`#1B998B` on `#C2F970`	Aa	2.86:1	Fail
`#0B525B` on `#1B998B`	Aa	2.52:1	Fail
`#03071E` on `#0B525B`	Aa	2.25:1	Fail

Northern Lights 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 Northern Lights

Color blindness simulation

Contrast check WCAG ratios between palette colors

Similar palettes 24 more in this mood