What are the hex codes in the Wisteria & Periwinkle Muse palette?

The Wisteria & Periwinkle Muse color palette consists of Lavender #E7EAFF, Periwinkle #D8C7FF, Wisteria #DCACDB, Heather #C3A9B3.

How should I use the Wisteria & Periwinkle Muse palette on a website?

Use Lavender #E7EAFF as the background, Heather #C3A9B3 for text, Periwinkle #D8C7FF for buttons and links, and Wisteria #DCACDB for accents. No pair inside the palette reaches 4.5:1, so add black or white for body text.

Which colors in Wisteria & Periwinkle Muse have enough contrast for text?

The highest-contrast pair is #E7EAFF on #C3A9B3 with a ratio of 1.83:1, which does not meet WCAG AA; add a darker or lighter neutral for body text.

#E7EAFFLavender

#D8C7FFPeriwinkle

#DCACDBWisteria

#C3A9B3Heather

Wisteria & Periwinkle Muse color palette

Pastel Gradient Light Muted Romantic White Purple

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Lavender	`#E7EAFF`	`rgb(231, 234, 255)`	`hsl(233, 100%, 95%)`	`oklch(94.1% 0.028 279)`
Periwinkle	`#D8C7FF`	`rgb(216, 199, 255)`	`hsl(258, 100%, 89%)`	`oklch(86.2% 0.079 299)`
Wisteria	`#DCACDB`	`rgb(220, 172, 219)`	`hsl(301, 41%, 77%)`	`oklch(80.3% 0.084 327)`
Heather	`#C3A9B3`	`rgb(195, 169, 179)`	`hsl(337, 18%, 71%)`	`oklch(76.0% 0.033 353)`

Why it works and how to use it

Wisteria & Periwinkle Muse is a vivid light, split color palette tagged pastel, gradient, light. The hues span about 79°, enough contrast to create a focal point without the harshness of true complements. These are bold, punchy colors that need generous white space around them. Warm and cool hues are mixed, which adds depth.

With 3 chromatic colors, Periwinkle takes the lead while the rest support. Lightness runs from 71% to 95%. Well suited to websites, presentations and branding.

Background: Lavender (#E7EAFF) is the lightest color, so it belongs on large surfaces.
Text: Heather (#C3A9B3) on #E7EAFF gives 1.83:1, so pair it with a darker neutral for body copy.
Primary: Periwinkle (#D8C7FF) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Wisteria (#DCACDB) 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 Wisteria & Periwinkle Muse

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

#E7EAFF

#D8C7FF

#DCACDB

#C3A9B3

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
`#E7EAFF` on `#C3A9B3`	Aa	1.83:1	Fail
`#E7EAFF` on `#DCACDB`	Aa	1.61:1	Fail
`#D8C7FF` on `#C3A9B3`	Aa	1.4:1	Fail
`#E7EAFF` on `#D8C7FF`	Aa	1.3:1	Fail
`#D8C7FF` on `#DCACDB`	Aa	1.23:1	Fail
`#DCACDB` on `#C3A9B3`	Aa	1.14:1	Fail

:root {
  --lavender: #E7EAFF;
  --periwinkle: #D8C7FF;
  --wisteria: #DCACDB;
  --heather: #C3A9B3;
}

$lavender: #E7EAFF;
$periwinkle: #D8C7FF;
$wisteria: #DCACDB;
$heather: #C3A9B3;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'lavender': '#E7EAFF',
        'periwinkle': '#D8C7FF',
        'wisteria': '#DCACDB',
        'heather': '#C3A9B3',
      },
    },
  },
};

{
  "name": "Wisteria & Periwinkle Muse",
  "colors": [
    "#E7EAFF",
    "#D8C7FF",
    "#DCACDB",
    "#C3A9B3"
  ]
}

background: linear-gradient(135deg, #E7EAFF, #D8C7FF, #DCACDB, #C3A9B3);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2025-09-21 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood