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

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

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.

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.

Background: Snow (#FFF9F0) is the lightest color, so it belongs on large surfaces.
Text: Umber (#644B3A) on #FFF9F0 gives 7.69:1, passing WCAG AAA.
Primary: Vanilla (#FFD384) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Mocha (#AA7B58) for highlights, badges and hover states.

2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Umber on Snow at 7.69:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Lemon Vanilla & Mocha

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

#644B3A

#AA7B58

#FFD384

#FFF9F0

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
`#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

Similar palettes 24 more in this mood