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

The Fern Juniper & Sage color palette consists of Sage #87B7A4, Gray #5D8875, Juniper #3D6C5A, Spruce #2C4F3C.

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

Use Sage #87B7A4 as the background, Spruce #2C4F3C for text, Juniper #3D6C5A for buttons and links, and Gray #5D8875 for accents. No pair inside the palette reaches 4.5:1, so add black or white for body text.

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

The highest-contrast pair is #87B7A4 on #2C4F3C with a ratio of 4.08:1, which passes WCAG AA for large text only.

#87B7A4Sage

#5D8875Gray

#3D6C5AJuniper

#2C4F3CSpruce

Fern Juniper & Sage color palette

Muted Cold

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Sage	`#87B7A4`	`rgb(135, 183, 164)`	`hsl(156, 25%, 62%)`	`oklch(74.0% 0.058 168)`
Gray	`#5D8875`	`rgb(93, 136, 117)`	`hsl(153, 19%, 45%)`	`oklch(58.9% 0.056 165)`
Juniper	`#3D6C5A`	`rgb(61, 108, 90)`	`hsl(157, 28%, 33%)`	`oklch(49.2% 0.060 167)`
Spruce	`#2C4F3C`	`rgb(44, 79, 60)`	`hsl(147, 28%, 24%)`	`oklch(39.5% 0.052 159)`

Why it works and how to use it

Fern Juniper & Sage is a monochromatic color palette tagged muted, cold. All four colors sit within 10° of hue, so the scheme reads as one color explored across light and dark. Neither washed out nor loud, it adapts to most contexts. The overall temperature is cool.

With 4 chromatic colors, Juniper takes the lead while the rest support. Lightness runs from 24% to 62%. Well suited to websites, presentations and branding.

Background: Sage (#87B7A4) is the lightest color, so it belongs on large surfaces.
Text: Spruce (#2C4F3C) on #87B7A4 gives 4.08:1, enough for large headings only.
Primary: Juniper (#3D6C5A) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Gray (#5D8875) for highlights, badges and hover states.

No pair inside the palette reaches 4.5:1, so add black or white for body text.

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

BrandFeaturesPricingBlogGet started

Design faster with Fern Juniper & Sage

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

#87B7A4

#5D8875

#3D6C5A

#2C4F3C

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
`#87B7A4` on `#2C4F3C`	Aa	4.08:1	AA large only
`#87B7A4` on `#3D6C5A`	Aa	2.68:1	Fail
`#5D8875` on `#2C4F3C`	Aa	2.29:1	Fail
`#87B7A4` on `#5D8875`	Aa	1.78:1	Fail
`#3D6C5A` on `#2C4F3C`	Aa	1.52:1	Fail
`#5D8875` on `#3D6C5A`	Aa	1.5:1	Fail

Similar palettes 24 more in this mood