What are the hex codes in the Cool Lapis & Space palette?

The Cool Lapis & Space color palette consists of Ash #8CBDBF, Lapis #306788, Space #0D2445, Bone #DAE3D7.

How should I use the Cool Lapis & Space palette on a website?

Use Bone #DAE3D7 as the background, Space #0D2445 for text, Lapis #306788 for buttons and links, and Ash #8CBDBF for accents. 3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Space on Bone at 11.77:1.

Which colors in Cool Lapis & Space have enough contrast for text?

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

#8CBDBFAsh

#306788Lapis

#0D2445Space

#DAE3D7Bone

Cool Lapis & Space color palette

Muted Dark Cold Gray

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Ash	`#8CBDBF`	`rgb(140, 189, 191)`	`hsl(182, 28%, 65%)`	`oklch(76.5% 0.052 199)`
Lapis	`#306788`	`rgb(48, 103, 136)`	`hsl(203, 48%, 36%)`	`oklch(49.1% 0.079 238)`
Space	`#0D2445`	`rgb(13, 36, 69)`	`hsl(215, 68%, 16%)`	`oklch(26.2% 0.068 258)`
Bone	`#DAE3D7`	`rgb(218, 227, 215)`	`hsl(105, 18%, 87%)`	`oklch(90.6% 0.019 138)`

Why it works and how to use it

Cool Lapis & Space is a split color palette tagged muted, dark, cold. The hues span about 110°, 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 4 chromatic colors, Lapis takes the lead while the rest support. Lightness runs from 16% to 87%. Well suited to websites, presentations and branding.

Background: Bone (#DAE3D7) is the lightest color, so it belongs on large surfaces.
Text: Space (#0D2445) on #DAE3D7 gives 11.77:1, passing WCAG AAA.
Primary: Lapis (#306788) is the most saturated mid-tone; use it for buttons and links (4.66:1 against the background, fine for UI elements).
Accent: Ash (#8CBDBF) for highlights, badges and hover states.

3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Space on Bone at 11.77:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Cool Lapis & Space

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

#8CBDBF

#306788

#0D2445

#DAE3D7

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
`#0D2445` on `#DAE3D7`	Aa	11.77:1	AAA
`#8CBDBF` on `#0D2445`	Aa	7.49:1	AAA
`#306788` on `#DAE3D7`	Aa	4.66:1	AA
`#8CBDBF` on `#306788`	Aa	2.97:1	Fail
`#306788` on `#0D2445`	Aa	2.52:1	Fail
`#8CBDBF` on `#DAE3D7`	Aa	1.57:1	Fail

Similar palettes 24 more in this mood