What are the hex codes in the Grounded Caramel & Olive palette?

The Grounded Caramel & Olive color palette consists of Hunter Green #5B580A, Olive #8D7900, Caramel #DC8900, Tan #CEBB98.

How should I use the Grounded Caramel & Olive palette on a website?

Use Tan #CEBB98 as the background, Hunter Green #5B580A for text, Olive #8D7900 for buttons and links, and Caramel #DC8900 for accents. No pair inside the palette reaches 4.5:1, so add black or white for body text.

Which colors in Grounded Caramel & Olive have enough contrast for text?

The highest-contrast pair is #5B580A on #CEBB98 with a ratio of 3.93:1, which passes WCAG AA for large text only.

#5B580AHunter Green

#8D7900Olive

#DC8900Caramel

#CEBB98Tan

Grounded Caramel & Olive color palette

Warm Earthy Green Brown

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Hunter Green	`#5B580A`	`rgb(91, 88, 10)`	`hsl(58, 80%, 20%)`	`oklch(44.9% 0.092 107)`
Olive	`#8D7900`	`rgb(141, 121, 0)`	`hsl(51, 100%, 28%)`	`oklch(57.7% 0.119 98)`
Caramel	`#DC8900`	`rgb(220, 137, 0)`	`hsl(37, 100%, 43%)`	`oklch(70.1% 0.154 68)`
Tan	`#CEBB98`	`rgb(206, 187, 152)`	`hsl(39, 36%, 70%)`	`oklch(79.9% 0.052 83)`

Why it works and how to use it

Grounded Caramel & Olive is a vivid monochromatic color palette tagged warm, earthy, green. All four colors sit within 21° of hue, so the scheme reads as one color explored across light and dark. These are bold, punchy colors that need generous white space around them. The overall temperature is warm.

With 4 chromatic colors, Olive takes the lead while the rest support. Lightness runs from 20% to 70%. Well suited to wellness, organic and outdoor brands.

Background: Tan (#CEBB98) is the lightest color, so it belongs on large surfaces.
Text: Hunter Green (#5B580A) on #CEBB98 gives 3.93:1, enough for large headings only.
Primary: Olive (#8D7900) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Caramel (#DC8900) 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 Grounded Caramel & 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

#5B580A

#8D7900

#DC8900

#CEBB98

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
`#5B580A` on `#CEBB98`	Aa	3.93:1	AA large only
`#5B580A` on `#DC8900`	Aa	2.68:1	Fail
`#8D7900` on `#CEBB98`	Aa	2.3:1	Fail
`#5B580A` on `#8D7900`	Aa	1.71:1	Fail
`#8D7900` on `#DC8900`	Aa	1.57:1	Fail
`#DC8900` on `#CEBB98`	Aa	1.47:1	Fail

Similar palettes 24 more in this mood