What are the hex codes in the Sage & Bone Story palette?

The Sage & Bone Story color palette consists of Smoke #F7FAF3, Bone #D4E2C5, Sage #8FA983, Juniper #465645.

How should I use the Sage & Bone Story palette on a website?

Use Smoke #F7FAF3 as the background, Juniper #465645 for text, Bone #D4E2C5 for buttons and links, and Sage #8FA983 for accents. 2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Smoke on Juniper at 7.44:1.

Which colors in Sage & Bone Story have enough contrast for text?

The highest-contrast pair is #F7FAF3 on #465645 with a ratio of 7.44:1, which passes WCAG AA for normal text.

#F7FAF3Smoke

#D4E2C5Bone

#8FA983Sage

#465645Juniper

Sage & Bone Story color palette

Muted Minimal White

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Smoke	`#F7FAF3`	`rgb(247, 250, 243)`	`hsl(86, 41%, 97%)`	`oklch(98.1% 0.010 126)`
Bone	`#D4E2C5`	`rgb(212, 226, 197)`	`hsl(89, 33%, 83%)`	`oklch(89.4% 0.042 128)`
Sage	`#8FA983`	`rgb(143, 169, 131)`	`hsl(101, 18%, 59%)`	`oklch(70.5% 0.061 136)`
Juniper	`#465645`	`rgb(70, 86, 69)`	`hsl(116, 11%, 30%)`	`oklch(43.4% 0.034 143)`

Why it works and how to use it

Sage & Bone Story is a monochromatic color palette tagged muted, minimal, white. A monochromatic set: the same hue family from Juniper down to Smoke. Saturation is moderate, which keeps it flexible for both interfaces and print.

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

Background: Smoke (#F7FAF3) is the lightest color, so it belongs on large surfaces.
Text: Juniper (#465645) on #F7FAF3 gives 7.44:1, passing WCAG AAA.
Primary: Bone (#D4E2C5) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Sage (#8FA983) for highlights, badges and hover states.

2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Smoke on Juniper at 7.44:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Sage & Bone Story

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

#F7FAF3

#D4E2C5

#8FA983

#465645

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
`#F7FAF3` on `#465645`	Aa	7.44:1	AAA
`#D4E2C5` on `#465645`	Aa	5.78:1	AA
`#8FA983` on `#465645`	Aa	3.05:1	AA large only
`#F7FAF3` on `#8FA983`	Aa	2.44:1	Fail
`#D4E2C5` on `#8FA983`	Aa	1.9:1	Fail
`#F7FAF3` on `#D4E2C5`	Aa	1.29:1	Fail

Similar palettes 24 more in this mood