What are the hex codes in the Terra Moss & Sand palette?

The Terra Moss & Sand color palette consists of Oat #CED8A7, Sand #B8BC7B, Moss #9E9E5A, Olive #7E7B3E.

How should I use the Terra Moss & Sand palette on a website?

Use Oat #CED8A7 as the background, Olive #7E7B3E for text, Sand #B8BC7B for buttons and links, and Moss #9E9E5A for accents. No pair inside the palette reaches 4.5:1, so add black or white for body text.

Which colors in Terra Moss & Sand have enough contrast for text?

The highest-contrast pair is #CED8A7 on #7E7B3E with a ratio of 2.92:1, which does not meet WCAG AA; add a darker or lighter neutral for body text.

#CED8A7Oat

#B8BC7BSand

#9E9E5AMoss

#7E7B3EOlive

Terra Moss & Sand color palette

Muted Warm Beige Green

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Oat	`#CED8A7`	`rgb(206, 216, 167)`	`hsl(72, 39%, 75%)`	`oklch(86.2% 0.066 117)`
Sand	`#B8BC7B`	`rgb(184, 188, 123)`	`hsl(64, 33%, 61%)`	`oklch(77.7% 0.086 111)`
Moss	`#9E9E5A`	`rgb(158, 158, 90)`	`hsl(60, 27%, 49%)`	`oklch(68.4% 0.090 109)`
Olive	`#7E7B3E`	`rgb(126, 123, 62)`	`hsl(57, 34%, 37%)`	`oklch(57.2% 0.083 106)`

Why it works and how to use it

Terra Moss & Sand is a monochromatic color palette tagged muted, warm, beige. All four colors sit within 15° 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 warm.

With 4 chromatic colors, Sand takes the lead while the rest support. Lightness runs from 37% to 75%. Well suited to websites, presentations and branding.

Background: Oat (#CED8A7) is the lightest color, so it belongs on large surfaces.
Text: Olive (#7E7B3E) on #CED8A7 gives 2.92:1, so pair it with a darker neutral for body copy.
Primary: Sand (#B8BC7B) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Moss (#9E9E5A) 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 Terra Moss & Sand

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

#CED8A7

#B8BC7B

#9E9E5A

#7E7B3E

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
`#CED8A7` on `#7E7B3E`	Aa	2.92:1	Fail
`#B8BC7B` on `#7E7B3E`	Aa	2.2:1	Fail
`#CED8A7` on `#9E9E5A`	Aa	1.87:1	Fail
`#9E9E5A` on `#7E7B3E`	Aa	1.56:1	Fail
`#B8BC7B` on `#9E9E5A`	Aa	1.4:1	Fail
`#CED8A7` on `#B8BC7B`	Aa	1.33:1	Fail

Similar palettes 24 more in this mood