What are the hex codes in the Frosted Amethyst & Cotton Candy palette?

The Frosted Amethyst & Cotton Candy color palette consists of Eggplant #563E5A, Amethyst #9D7DE4, Dusty Blue #98A5D0, Cotton Candy #FFB8DE.

How should I use the Frosted Amethyst & Cotton Candy palette on a website?

Use Cotton Candy #FFB8DE as the background, Eggplant #563E5A for text, Amethyst #9D7DE4 for buttons and links, and Dusty Blue #98A5D0 for accents. 1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Eggplant on Cotton Candy at 5.9:1.

Which colors in Frosted Amethyst & Cotton Candy have enough contrast for text?

The highest-contrast pair is #563E5A on #FFB8DE with a ratio of 5.9:1, which passes WCAG AA for normal text.

#563E5AEggplant

#9D7DE4Amethyst

#98A5D0Dusty Blue

#FFB8DECotton Candy

Frosted Amethyst & Cotton Candy color palette

Purple

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Eggplant	`#563E5A`	`rgb(86, 62, 90)`	`hsl(291, 18%, 30%)`	`oklch(40.1% 0.055 322)`
Amethyst	`#9D7DE4`	`rgb(157, 125, 228)`	`hsl(259, 66%, 69%)`	`oklch(66.4% 0.151 296)`
Dusty Blue	`#98A5D0`	`rgb(152, 165, 208)`	`hsl(226, 37%, 71%)`	`oklch(72.7% 0.064 272)`
Cotton Candy	`#FFB8DE`	`rgb(255, 184, 222)`	`hsl(328, 100%, 86%)`	`oklch(85.9% 0.095 346)`

Why it works and how to use it

Frosted Amethyst & Cotton Candy is a split color palette tagged purple. A split scheme: Eggplant plays against Cotton Candy across roughly 102° of hue. Saturation is moderate, which keeps it flexible for both interfaces and print. Warm and cool hues are mixed, which adds depth.

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

Background: Cotton Candy (#FFB8DE) is the lightest color, so it belongs on large surfaces.
Text: Eggplant (#563E5A) on #FFB8DE gives 5.9:1, passing WCAG AA.
Primary: Amethyst (#9D7DE4) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Dusty Blue (#98A5D0) for highlights, badges and hover states.

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

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

BrandFeaturesPricingBlogGet started

Design faster with Frosted Amethyst & Cotton Candy

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

#563E5A

#9D7DE4

#98A5D0

#FFB8DE

Color-blind check: under tritanopia, Amethyst and Dusty Blue 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
`#563E5A` on `#FFB8DE`	Aa	5.9:1	AA
`#563E5A` on `#98A5D0`	Aa	3.86:1	AA large only
`#563E5A` on `#9D7DE4`	Aa	2.91:1	Fail
`#9D7DE4` on `#FFB8DE`	Aa	2.03:1	Fail
`#98A5D0` on `#FFB8DE`	Aa	1.53:1	Fail
`#9D7DE4` on `#98A5D0`	Aa	1.33:1	Fail

:root {
  --eggplant: #563E5A;
  --amethyst: #9D7DE4;
  --dusty-blue: #98A5D0;
  --cotton-candy: #FFB8DE;
}

$eggplant: #563E5A;
$amethyst: #9D7DE4;
$dusty-blue: #98A5D0;
$cotton-candy: #FFB8DE;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'eggplant': '#563E5A',
        'amethyst': '#9D7DE4',
        'dusty-blue': '#98A5D0',
        'cotton-candy': '#FFB8DE',
      },
    },
  },
};

{
  "name": "Frosted Amethyst & Cotton Candy",
  "colors": [
    "#563E5A",
    "#9D7DE4",
    "#98A5D0",
    "#FFB8DE"
  ]
}

background: linear-gradient(135deg, #563E5A, #9D7DE4, #98A5D0, #FFB8DE);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2025-08-24 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood