What are the hex codes in the Dusk Slate Blue & Wisteria palette?

The Dusk Slate Blue & Wisteria color palette consists of Slate Blue #6D6DD6, Orchid #E17EBB, Wisteria #B68CF3, Mauve #E8A8F0.

How should I use the Dusk Slate Blue & Wisteria palette on a website?

Use Mauve #E8A8F0 as the background, Slate Blue #6D6DD6 for text, Wisteria #B68CF3 for buttons and links, and Orchid #E17EBB for accents. No pair inside the palette reaches 4.5:1, so add black or white for body text.

Which colors in Dusk Slate Blue & Wisteria have enough contrast for text?

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

#6D6DD6Slate Blue

#E17EBBOrchid

#B68CF3Wisteria

#E8A8F0Mauve

Dusk Slate Blue & Wisteria color palette

Gradient Vibrant Purple

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Slate Blue	`#6D6DD6`	`rgb(109, 109, 214)`	`hsl(240, 56%, 63%)`	`oklch(58.6% 0.157 280)`
Orchid	`#E17EBB`	`rgb(225, 126, 187)`	`hsl(323, 62%, 69%)`	`oklch(72.0% 0.142 344)`
Wisteria	`#B68CF3`	`rgb(182, 140, 243)`	`hsl(264, 81%, 75%)`	`oklch(72.1% 0.151 302)`
Mauve	`#E8A8F0`	`rgb(232, 168, 240)`	`hsl(293, 71%, 80%)`	`oklch(81.5% 0.120 323)`

Why it works and how to use it

Dusk Slate Blue & Wisteria is a vivid split color palette tagged gradient, vibrant, purple. A split scheme: Slate Blue plays against Mauve across roughly 83° of hue. Saturation runs high, so use the brightest color sparingly and let the others carry the surface area. Warm and cool hues are mixed, which adds depth.

With 4 chromatic colors, Wisteria takes the lead while the rest support. Lightness runs from 63% to 80%. Well suited to websites, presentations and branding.

Background: Mauve (#E8A8F0) is the lightest color, so it belongs on large surfaces.
Text: Slate Blue (#6D6DD6) on #E8A8F0 gives 2.35:1, so pair it with a darker neutral for body copy.
Primary: Wisteria (#B68CF3) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Orchid (#E17EBB) 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 Dusk Slate Blue & Wisteria

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

#6D6DD6

#E17EBB

#B68CF3

#E8A8F0

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
`#6D6DD6` on `#E8A8F0`	Aa	2.35:1	Fail
`#6D6DD6` on `#B68CF3`	Aa	1.67:1	Fail
`#6D6DD6` on `#E17EBB`	Aa	1.64:1	Fail
`#E17EBB` on `#E8A8F0`	Aa	1.43:1	Fail
`#B68CF3` on `#E8A8F0`	Aa	1.41:1	Fail
`#E17EBB` on `#B68CF3`	Aa	1.02:1	Fail

:root {
  --slate-blue: #6D6DD6;
  --orchid: #E17EBB;
  --wisteria: #B68CF3;
  --mauve: #E8A8F0;
}

$slate-blue: #6D6DD6;
$orchid: #E17EBB;
$wisteria: #B68CF3;
$mauve: #E8A8F0;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'slate-blue': '#6D6DD6',
        'orchid': '#E17EBB',
        'wisteria': '#B68CF3',
        'mauve': '#E8A8F0',
      },
    },
  },
};

{
  "name": "Dusk Slate Blue & Wisteria",
  "colors": [
    "#6D6DD6",
    "#E17EBB",
    "#B68CF3",
    "#E8A8F0"
  ]
}

background: linear-gradient(135deg, #6D6DD6, #E17EBB, #B68CF3, #E8A8F0);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2024-10-15 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood