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

The Royal Slate Blue & Wisteria color palette consists of Slate Blue #7167A3, Wisteria #B49AD6, Thistle #DBB1E1, Cotton Candy #F7C7E1.

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

Use Cotton Candy #F7C7E1 as the background, Slate Blue #7167A3 for text, Thistle #DBB1E1 for buttons and links, and Wisteria #B49AD6 for accents. No pair inside the palette reaches 4.5:1, so add black or white for body text.

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

The highest-contrast pair is #7167A3 on #F7C7E1 with a ratio of 3.41:1, which passes WCAG AA for large text only.

#7167A3Slate Blue

#B49AD6Wisteria

#DBB1E1Thistle

#F7C7E1Cotton Candy

Royal Slate Blue & Wisteria color palette

Muted Romantic Purple

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Slate Blue	`#7167A3`	`rgb(113, 103, 163)`	`hsl(250, 25%, 52%)`	`oklch(54.8% 0.092 291)`
Wisteria	`#B49AD6`	`rgb(180, 154, 214)`	`hsl(266, 42%, 72%)`	`oklch(73.0% 0.090 304)`
Thistle	`#DBB1E1`	`rgb(219, 177, 225)`	`hsl(293, 44%, 79%)`	`oklch(81.3% 0.080 322)`
Cotton Candy	`#F7C7E1`	`rgb(247, 199, 225)`	`hsl(328, 75%, 87%)`	`oklch(87.9% 0.064 345)`

Why it works and how to use it

Royal Slate Blue & Wisteria is a pastel light, split color palette tagged muted, romantic, purple. A split scheme: Slate Blue plays against Cotton Candy across roughly 78° of hue. High lightness and gentle saturation put it firmly in pastel territory. Warm and cool hues are mixed, which adds depth.

The palette holds together thanks to its split hue relationship and a soft light-to-dark ladder (87% down to 52% lightness). A natural fit for social media templates and gentle interfaces.

Background: Cotton Candy (#F7C7E1) is the lightest color, so it belongs on large surfaces.
Text: Slate Blue (#7167A3) on #F7C7E1 gives 3.41:1, enough for large headings only.
Primary: Thistle (#DBB1E1) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Wisteria (#B49AD6) 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 Royal 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

#7167A3

#B49AD6

#DBB1E1

#F7C7E1

Color-blind check: under protanopia, Wisteria and Thistle become hard to tell apart, so do not rely on that pair alone to carry meaning.

Palette card

Contrast check WCAG ratios between palette colors

Pair	Sample	Ratio	Level
`#7167A3` on `#F7C7E1`	Aa	3.41:1	AA large only
`#7167A3` on `#DBB1E1`	Aa	2.73:1	Fail
`#7167A3` on `#B49AD6`	Aa	2.05:1	Fail
`#B49AD6` on `#F7C7E1`	Aa	1.67:1	Fail
`#B49AD6` on `#DBB1E1`	Aa	1.33:1	Fail
`#DBB1E1` on `#F7C7E1`	Aa	1.25:1	Fail

:root {
  --slate-blue: #7167A3;
  --wisteria: #B49AD6;
  --thistle: #DBB1E1;
  --cotton-candy: #F7C7E1;
}

$slate-blue: #7167A3;
$wisteria: #B49AD6;
$thistle: #DBB1E1;
$cotton-candy: #F7C7E1;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'slate-blue': '#7167A3',
        'wisteria': '#B49AD6',
        'thistle': '#DBB1E1',
        'cotton-candy': '#F7C7E1',
      },
    },
  },
};

{
  "name": "Royal Slate Blue & Wisteria",
  "colors": [
    "#7167A3",
    "#B49AD6",
    "#DBB1E1",
    "#F7C7E1"
  ]
}

background: linear-gradient(135deg, #7167A3, #B49AD6, #DBB1E1, #F7C7E1);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2024-09-01 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood