What are the hex codes in the Mocha & Lilac Whisper palette?

The Mocha & Lilac Whisper color palette consists of Lilac #C6889E, Mocha #A5677F, Brick Red #7F4C61, Plum Purple #5D3543.

How should I use the Mocha & Lilac Whisper palette on a website?

Use Lilac #C6889E as the background, Plum Purple #5D3543 for text, Mocha #A5677F for buttons and links, and Brick Red #7F4C61 for accents. No pair inside the palette reaches 4.5:1, so add black or white for body text.

Which colors in Mocha & Lilac Whisper have enough contrast for text?

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

#C6889ELilac

#A5677FMocha

#7F4C61Brick Red

#5D3543Plum Purple

Mocha & Lilac Whisper color palette

Muted Warm

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Lilac	`#C6889E`	`rgb(198, 136, 158)`	`hsl(339, 35%, 65%)`	`oklch(69.5% 0.081 356)`
Mocha	`#A5677F`	`rgb(165, 103, 127)`	`hsl(337, 26%, 53%)`	`oklch(58.8% 0.085 355)`
Brick Red	`#7F4C61`	`rgb(127, 76, 97)`	`hsl(335, 25%, 40%)`	`oklch(48.2% 0.074 354)`
Plum Purple	`#5D3543`	`rgb(93, 53, 67)`	`hsl(339, 27%, 29%)`	`oklch(38.3% 0.060 358)`

Why it works and how to use it

Mocha & Lilac Whisper is a monochromatic color palette tagged muted, warm. A monochromatic set: the same hue family from Plum Purple down to Lilac. Saturation is moderate, which keeps it flexible for both interfaces and print. The overall temperature is warm.

With 4 chromatic colors, Mocha takes the lead while the rest support. Lightness runs from 29% to 65%. Well suited to websites, presentations and branding.

Background: Lilac (#C6889E) is the lightest color, so it belongs on large surfaces.
Text: Plum Purple (#5D3543) on #C6889E gives 3.61:1, enough for large headings only.
Primary: Mocha (#A5677F) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Brick Red (#7F4C61) 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 Mocha & Lilac Whisper

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

#C6889E

#A5677F

#7F4C61

#5D3543

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
`#C6889E` on `#5D3543`	Aa	3.61:1	AA large only
`#C6889E` on `#7F4C61`	Aa	2.39:1	Fail
`#A5677F` on `#5D3543`	Aa	2.36:1	Fail
`#A5677F` on `#7F4C61`	Aa	1.56:1	Fail
`#C6889E` on `#A5677F`	Aa	1.53:1	Fail
`#7F4C61` on `#5D3543`	Aa	1.51:1	Fail

:root {
  --lilac: #C6889E;
  --mocha: #A5677F;
  --brick-red: #7F4C61;
  --plum-purple: #5D3543;
}

$lilac: #C6889E;
$mocha: #A5677F;
$brick-red: #7F4C61;
$plum-purple: #5D3543;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'lilac': '#C6889E',
        'mocha': '#A5677F',
        'brick-red': '#7F4C61',
        'plum-purple': '#5D3543',
      },
    },
  },
};

{
  "name": "Mocha & Lilac Whisper",
  "colors": [
    "#C6889E",
    "#A5677F",
    "#7F4C61",
    "#5D3543"
  ]
}

background: linear-gradient(135deg, #C6889E, #A5677F, #7F4C61, #5D3543);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2026-01-14 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood