What are the hex codes in the Lunar palette?

The Lunar color palette consists of Licorice #0D1321, Charcoal #34465E, Slate #748CAB, Eggshell #F0EBD8.

How should I use the Lunar palette on a website?

Use Eggshell #F0EBD8 as the background, Licorice #0D1321 for text, Charcoal #34465E for buttons and links, and Slate #748CAB for accents. 3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Licorice on Eggshell at 15.53:1.

Which colors in Lunar have enough contrast for text?

The highest-contrast pair is #0D1321 on #F0EBD8 with a ratio of 15.53:1, which passes WCAG AA for normal text.

#0D1321Licorice

#34465ECharcoal

#748CABSlate

#F0EBD8Eggshell

Lunar color palette

Space Dark Muted Minimal Black Gray

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Licorice	`#0D1321`	`rgb(13, 19, 33)`	`hsl(222, 43%, 9%)`	`oklch(18.8% 0.030 266)`
Charcoal	`#34465E`	`rgb(52, 70, 94)`	`hsl(214, 29%, 29%)`	`oklch(38.9% 0.047 256)`
Slate	`#748CAB`	`rgb(116, 140, 171)`	`hsl(214, 25%, 56%)`	`oklch(63.3% 0.054 255)`
Eggshell	`#F0EBD8`	`rgb(240, 235, 216)`	`hsl(47, 44%, 89%)`	`oklch(93.9% 0.026 95)`

Why it works and how to use it

Lunar is a complementary color palette tagged space, dark, muted. Licorice and Eggshell 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 4 chromatic colors, Charcoal takes the lead while the rest support. Lightness runs from 9% to 89%. Well suited to websites, presentations and branding.

Background: Eggshell (#F0EBD8) is the lightest color, so it belongs on large surfaces.
Text: Licorice (#0D1321) on #F0EBD8 gives 15.53:1, passing WCAG AAA.
Primary: Charcoal (#34465E) is the most saturated mid-tone; use it for buttons and links (8.05:1 against the background, fine for UI elements).
Accent: Slate (#748CAB) for highlights, badges and hover states.

3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Licorice on Eggshell at 15.53:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Lunar

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

#0D1321

#34465E

#748CAB

#F0EBD8

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
`#0D1321` on `#F0EBD8`	Aa	15.53:1	AAA
`#34465E` on `#F0EBD8`	Aa	8.05:1	AAA
`#0D1321` on `#748CAB`	Aa	5.37:1	AA
`#748CAB` on `#F0EBD8`	Aa	2.89:1	Fail
`#34465E` on `#748CAB`	Aa	2.79:1	Fail
`#0D1321` on `#34465E`	Aa	1.93:1	Fail

Similar palettes 25 more in this mood