What are the hex codes in the Juniper & Sage Shore palette?

The Juniper & Sage Shore color palette consists of Raisin #152218, Juniper #465F3E, Sage #9DAA8E, Bone #DDDBD4.

How should I use the Juniper & Sage Shore palette on a website?

Use Bone #DDDBD4 as the background, Raisin #152218 for text, Juniper #465F3E for buttons and links, and Sage #9DAA8E for accents. 3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Raisin on Bone at 11.9:1.

Which colors in Juniper & Sage Shore have enough contrast for text?

The highest-contrast pair is #152218 on #DDDBD4 with a ratio of 11.9:1, which passes WCAG AA for normal text.

#152218Raisin

#465F3EJuniper

#9DAA8ESage

#DDDBD4Bone

Juniper & Sage Shore color palette

Muted Dark Minimal Gray

Open in generator

Ask AI about this palette: ChatGPT Claude Perplexity

Juniper & Sage Shore is a muted analogous color palette tagged muted, dark, minimal. The hues stay within 29° of each other on the color wheel, which is why the palette feels cohesive rather than busy. Every color is softened, so it works well as a background system for text-heavy layouts.

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Raisin	`#152218`	`rgb(21, 34, 24)`	`hsl(134, 24%, 11%)`	`oklch(23.6% 0.026 151)`
Juniper	`#465F3E`	`rgb(70, 95, 62)`	`hsl(105, 21%, 31%)`	`oklch(45.6% 0.060 138)`
Sage	`#9DAA8E`	`rgb(157, 170, 142)`	`hsl(88, 14%, 61%)`	`oklch(72.0% 0.042 128)`
Bone	`#DDDBD4`	`rgb(221, 219, 212)`	`hsl(47, 12%, 85%)`	`oklch(89.1% 0.010 94)`

Why it works and how to use it

The palette holds together thanks to its analogous hue relationship and a strong light-to-dark ladder (85% down to 11% lightness). A natural fit for websites, presentations and branding.

Pair	Sample	Ratio	Level
`#152218` on `#DDDBD4`	Aa	11.9:1	AAA
`#152218` on `#9DAA8E`	Aa	6.73:1	AA
`#465F3E` on `#DDDBD4`	Aa	5.11:1	AA
`#465F3E` on `#9DAA8E`	Aa	2.89:1	Fail
`#152218` on `#465F3E`	Aa	2.33:1	Fail
`#9DAA8E` on `#DDDBD4`	Aa	1.77:1	Fail

Juniper & Sage Shore 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 Juniper & Sage Shore

Color blindness simulation

Contrast check WCAG ratios between palette colors

Similar palettes 24 more in this mood