What are the hex codes in the Olive Brown palette?

The Olive Brown color palette consists of Taupe #4B4126, Cocoa #7A6A3E, Latte #B8A77A, Eggshell #F1EBDD.

How should I use the Olive Brown palette on a website?

Use Eggshell #F1EBDD as the background, Taupe #4B4126 for text, Cocoa #7A6A3E for buttons and links, and Latte #B8A77A for accents. 1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Taupe on Eggshell at 8.48:1.

Which colors in Olive Brown have enough contrast for text?

The highest-contrast pair is #4B4126 on #F1EBDD with a ratio of 8.48:1, which passes WCAG AA for normal text.

#4B4126Taupe

#7A6A3ECocoa

#B8A77ALatte

#F1EBDDEggshell

Olive Brown color palette

Muted Warm Earthy Brown White

Open in generator

Ask AI about this palette: ChatGPT Claude Perplexity

Olive Brown is a monochromatic color palette tagged muted, warm, earthy. All four colors sit within 2° 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.

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Taupe	`#4B4126`	`rgb(75, 65, 38)`	`hsl(44, 33%, 22%)`	`oklch(37.8% 0.044 90)`
Cocoa	`#7A6A3E`	`rgb(122, 106, 62)`	`hsl(44, 33%, 36%)`	`oklch(52.9% 0.065 90)`
Latte	`#B8A77A`	`rgb(184, 167, 122)`	`hsl(44, 30%, 60%)`	`oklch(73.2% 0.064 90)`
Eggshell	`#F1EBDD`	`rgb(241, 235, 221)`	`hsl(42, 42%, 91%)`	`oklch(94.1% 0.020 88)`

Why it works and how to use it

The palette holds together thanks to its monochromatic hue relationship and a strong light-to-dark ladder (91% down to 22% lightness). A natural fit for wellness, organic and outdoor brands.

Pair	Sample	Ratio	Level
`#4B4126` on `#F1EBDD`	Aa	8.48:1	AAA
`#7A6A3E` on `#F1EBDD`	Aa	4.46:1	AA large only
`#4B4126` on `#B8A77A`	Aa	4.25:1	AA large only
`#7A6A3E` on `#B8A77A`	Aa	2.23:1	Fail
`#B8A77A` on `#F1EBDD`	Aa	2:1	Fail
`#4B4126` on `#7A6A3E`	Aa	1.9:1	Fail

Olive Brown color palette

Color codes click any value to copy

Why it works and how to use it

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

Design faster with Olive Brown

Color blindness simulation

Contrast check WCAG ratios between palette colors

Similar palettes 24 more in this mood