What are the hex codes in the Lemon Vanilla & Mocha palette?

The Lemon Vanilla & Mocha color palette consists of Umber #644B3A, Mocha #AA7B58, Vanilla #FFD384, Snow #FFF9F0.

How should I use the Lemon Vanilla & Mocha palette on a website?

Use Snow #FFF9F0 as the background, Umber #644B3A for text, Vanilla #FFD384 for buttons and links, and Mocha #AA7B58 for accents. 2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Umber on Snow at 7.69:1.

Which colors in Lemon Vanilla & Mocha have enough contrast for text?

The highest-contrast pair is #644B3A on #FFF9F0 with a ratio of 7.69:1, which passes WCAG AA for normal text.

#644B3AUmber

#AA7B58Mocha

#FFD384Vanilla

#FFF9F0Snow

Lemon Vanilla & Mocha color palette

Coffee Warm Earthy Brown Beige White

Open in generator

Ask AI about this palette: ChatGPT Claude Perplexity

Lemon Vanilla & Mocha is a vivid monochromatic color palette tagged coffee, warm, earthy. All four colors sit within 15° 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.

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Umber	`#644B3A`	`rgb(100, 75, 58)`	`hsl(24, 27%, 31%)`	`oklch(43.5% 0.043 56)`
Mocha	`#AA7B58`	`rgb(170, 123, 88)`	`hsl(26, 33%, 51%)`	`oklch(62.2% 0.077 57)`
Vanilla	`#FFD384`	`rgb(255, 211, 132)`	`hsl(39, 100%, 76%)`	`oklch(88.8% 0.109 81)`
Snow	`#FFF9F0`	`rgb(255, 249, 240)`	`hsl(36, 100%, 97%)`	`oklch(98.4% 0.014 78)`

Why it works and how to use it

It works because the lightness range is wide (31% to 97%), which gives clear hierarchy between background, content and accents. Try it for wellness, organic and outdoor brands.

Pair	Sample	Ratio	Level
`#644B3A` on `#FFF9F0`	Aa	7.69:1	AAA
`#644B3A` on `#FFD384`	Aa	5.71:1	AA
`#AA7B58` on `#FFF9F0`	Aa	3.53:1	AA large only
`#AA7B58` on `#FFD384`	Aa	2.62:1	Fail
`#644B3A` on `#AA7B58`	Aa	2.18:1	Fail
`#FFD384` on `#FFF9F0`	Aa	1.35:1	Fail

Lemon Vanilla & Mocha 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 Lemon Vanilla & Mocha

Color blindness simulation

Contrast check WCAG ratios between palette colors

Similar palettes 24 more in this mood