What are the hex codes in the Elegant Mocha & Eggplant palette?

The Elegant Mocha & Eggplant color palette consists of Bone #E1DADA, Mushroom #CEAFB5, Mocha #AB7482, Eggplant #63404A.

How should I use the Elegant Mocha & Eggplant palette on a website?

Use Bone #E1DADA as the background, Eggplant #63404A for text, Mocha #AB7482 for buttons and links, and Mushroom #CEAFB5 for accents. 1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Bone on Eggplant at 6.45:1.

Which colors in Elegant Mocha & Eggplant have enough contrast for text?

The highest-contrast pair is #E1DADA on #63404A with a ratio of 6.45:1, which passes WCAG AA for normal text.

#E1DADABone

#CEAFB5Mushroom

#AB7482Mocha

#63404AEggplant

Elegant Mocha & Eggplant color palette

Muted Warm

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Bone	`#E1DADA`	`rgb(225, 218, 218)`	`hsl(0, 10%, 87%)`	`oklch(89.4% 0.008 17)`
Mushroom	`#CEAFB5`	`rgb(206, 175, 181)`	`hsl(348, 24%, 75%)`	`oklch(78.3% 0.037 5)`
Mocha	`#AB7482`	`rgb(171, 116, 130)`	`hsl(345, 25%, 56%)`	`oklch(62.0% 0.072 3)`
Eggplant	`#63404A`	`rgb(99, 64, 74)`	`hsl(343, 21%, 32%)`	`oklch(41.5% 0.051 1)`

Why it works and how to use it

Elegant Mocha & Eggplant is a muted monochromatic color palette tagged muted, warm. All four colors sit within 5° of hue, so the scheme reads as one color explored across light and dark. Every color is softened, so it works well as a background system for text-heavy layouts. The overall temperature is warm.

The palette holds together thanks to its monochromatic hue relationship and a strong light-to-dark ladder (87% down to 32% lightness). A natural fit for websites, presentations and branding.

Background: Bone (#E1DADA) is the lightest color, so it belongs on large surfaces.
Text: Eggplant (#63404A) on #E1DADA gives 6.45:1, passing WCAG AA.
Primary: Mocha (#AB7482) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Mushroom (#CEAFB5) for highlights, badges and hover states.

1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Bone on Eggplant at 6.45:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Elegant Mocha & Eggplant

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

#E1DADA

#CEAFB5

#AB7482

#63404A

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
`#E1DADA` on `#63404A`	Aa	6.45:1	AA
`#CEAFB5` on `#63404A`	Aa	4.41:1	AA large only
`#E1DADA` on `#AB7482`	Aa	2.75:1	Fail
`#AB7482` on `#63404A`	Aa	2.35:1	Fail
`#CEAFB5` on `#AB7482`	Aa	1.88:1	Fail
`#E1DADA` on `#CEAFB5`	Aa	1.46:1	Fail

Similar palettes 24 more in this mood