What are the hex codes in the Canyon Moss & Olive palette?

The Canyon Moss & Olive color palette consists of Sand #B3B778, Moss #9D9E59, Olive #868441, Fern #6E6930.

How should I use the Canyon Moss & Olive palette on a website?

Use Sand #B3B778 as the background, Fern #6E6930 for text, Olive #868441 for buttons and links, and Moss #9D9E59 for accents. No pair inside the palette reaches 4.5:1, so add black or white for body text.

Which colors in Canyon Moss & Olive have enough contrast for text?

The highest-contrast pair is #B3B778 on #6E6930 with a ratio of 2.67:1, which does not meet WCAG AA; add a darker or lighter neutral for body text.

#B3B778Sand

#9D9E59Moss

#868441Olive

#6E6930Fern

Canyon Moss & Olive color palette

Muted Warm Green

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Sand	`#B3B778`	`rgb(179, 183, 120)`	`hsl(64, 30%, 59%)`	`oklch(76.1% 0.084 111)`
Moss	`#9D9E59`	`rgb(157, 158, 89)`	`hsl(61, 28%, 48%)`	`oklch(68.3% 0.091 109)`
Olive	`#868441`	`rgb(134, 132, 65)`	`hsl(58, 35%, 39%)`	`oklch(60.0% 0.089 107)`
Fern	`#6E6930`	`rgb(110, 105, 48)`	`hsl(55, 39%, 31%)`	`oklch(51.2% 0.078 104)`

Why it works and how to use it

Canyon Moss & Olive is a monochromatic color palette tagged muted, warm, green. A monochromatic set: the same hue family from Fern down to Sand. Saturation is moderate, which keeps it flexible for both interfaces and print. The overall temperature is warm.

With 4 chromatic colors, Olive takes the lead while the rest support. Lightness runs from 31% to 59%. Well suited to websites, presentations and branding.

Background: Sand (#B3B778) is the lightest color, so it belongs on large surfaces.
Text: Fern (#6E6930) on #B3B778 gives 2.67:1, so pair it with a darker neutral for body copy.
Primary: Olive (#868441) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Moss (#9D9E59) 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 Canyon Moss & Olive

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

#B3B778

#9D9E59

#868441

#6E6930

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
`#B3B778` on `#6E6930`	Aa	2.67:1	Fail
`#9D9E59` on `#6E6930`	Aa	2:1	Fail
`#B3B778` on `#868441`	Aa	1.85:1	Fail
`#868441` on `#6E6930`	Aa	1.45:1	Fail
`#9D9E59` on `#868441`	Aa	1.39:1	Fail
`#B3B778` on `#9D9E59`	Aa	1.33:1	Fail

Similar palettes 24 more in this mood