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

The Misty Sage & Fern color palette consists of Fern #667754, Sage #99A87E, Putty #CDC7B1, Snow #FDFAF2.

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

Use Snow #FDFAF2 as the background, Fern #667754 for text, Putty #CDC7B1 for buttons and links, and Sage #99A87E for accents. 1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Fern on Snow at 4.65:1.

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

The highest-contrast pair is #667754 on #FDFAF2 with a ratio of 4.65:1, which passes WCAG AA for normal text.

#667754Fern

#99A87ESage

#CDC7B1Putty

#FDFAF2Snow

Misty Sage & Fern color palette

Muted White

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Fern	`#667754`	`rgb(102, 119, 84)`	`hsl(89, 17%, 40%)`	`oklch(54.6% 0.056 129)`
Sage	`#99A87E`	`rgb(153, 168, 126)`	`hsl(81, 19%, 58%)`	`oklch(70.9% 0.061 124)`
Putty	`#CDC7B1`	`rgb(205, 199, 177)`	`hsl(47, 22%, 75%)`	`oklch(82.9% 0.031 94)`
Snow	`#FDFAF2`	`rgb(253, 250, 242)`	`hsl(44, 73%, 97%)`	`oklch(98.5% 0.011 90)`

Why it works and how to use it

Misty Sage & Fern is an analogous color palette tagged muted, white. Analogous neighbors on the wheel (Sage, Putty) give it a natural, low-tension flow. Saturation is moderate, which keeps it flexible for both interfaces and print. The overall temperature is warm.

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

Background: Snow (#FDFAF2) is the lightest color, so it belongs on large surfaces.
Text: Fern (#667754) on #FDFAF2 gives 4.65:1, passing WCAG AA.
Primary: Putty (#CDC7B1) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Sage (#99A87E) for highlights, badges and hover states.

1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Fern on Snow at 4.65:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Misty Sage & Fern

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

#667754

#99A87E

#CDC7B1

#FDFAF2

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
`#667754` on `#FDFAF2`	Aa	4.65:1	AA
`#667754` on `#CDC7B1`	Aa	2.86:1	Fail
`#99A87E` on `#FDFAF2`	Aa	2.44:1	Fail
`#667754` on `#99A87E`	Aa	1.91:1	Fail
`#CDC7B1` on `#FDFAF2`	Aa	1.62:1	Fail
`#99A87E` on `#CDC7B1`	Aa	1.5:1	Fail

Similar palettes 24 more in this mood