Viking Diva to Cloudless Color Palette

About this palette

Viking Diva to Cloudless is a 4-color pastel, light palette: #CCB6E7 (Viking Diva), #FFC5C0 (Peach Fuzz), #E4DDBD (Silver Fern), #DDEDFF (Cloudless). It mixes purple, pink, yellow, white tones and feels warm overall. The strongest text pairing is #CCB6E7 on #DDEDFF with a contrast ratio of 1.54:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Viking Diva	rgb(204, 182, 231)	hsl(267, 51%, 81%)
Peach Fuzz	rgb(255, 197, 192)	hsl(5, 100%, 88%)
Silver Fern	rgb(228, 221, 189)	hsl(49, 42%, 82%)
Cloudless	rgb(221, 237, 255)	hsl(212, 100%, 93%)

Accessible color pairs

Pairs with at least 3:1 contrast (large text and UI components); 4.5:1 or more passes WCAG AA for body text.

Color blindness preview

CSS variables

/* Viking Diva to Cloudless — https://swatchly.xyz/palette/ccb6e7-ffc5c0-e4ddbd-ddedff */
:root {
  --viking-diva: #ccb6e7;
  --peach-fuzz: #ffc5c0;
  --silver-fern: #e4ddbd;
  --cloudless: #ddedff;
}

Tailwind CSS v4

/* Viking Diva to Cloudless — https://swatchly.xyz/palette/ccb6e7-ffc5c0-e4ddbd-ddedff */
@theme {
  --color-viking-diva: #ccb6e7;
  --color-viking-diva-50: #f8f3ff;
  --color-viking-diva-100: #f1e6ff;
  --color-viking-diva-200: #e0d0f4;
  --color-viking-diva-300: #ccb6e7;
  --color-viking-diva-400: #ac97c5;
  --color-viking-diva-500: #907ca9;
  --color-viking-diva-600: #76618d;
  --color-viking-diva-700: #5e4c73;
  --color-viking-diva-800: #4a3a5c;
  --color-viking-diva-900: #392c49;
  --color-viking-diva-950: #241a2f;
  --color-peach-fuzz: #ffc5c0;
  --color-peach-fuzz-50: #fff0ee;
  --color-peach-fuzz-100: #ffe2df;
  --color-peach-fuzz-200: #ffc5c0;
  --color-peach-fuzz-300: #e2b1ad;
  --color-peach-fuzz-400: #c6918d;
  --color-peach-fuzz-500: #aa7671;
  --color-peach-fuzz-600: #8e5c58;
  --color-peach-fuzz-700: #744744;
  --color-peach-fuzz-800: #5d3633;
  --color-peach-fuzz-900: #492826;
  --color-peach-fuzz-950: #2f1816;
  --color-silver-fern: #e4ddbd;
  --color-silver-fern-50: #fcf9e8;
  --color-silver-fern-100: #f4f0dd;
  --color-silver-fern-200: #e4ddbd;
  --color-silver-fern-300: #cbc5ab;
  --color-silver-fern-400: #aca588;
  --color-silver-fern-500: #8f896b;
  --color-silver-fern-600: #746e51;
  --color-silver-fern-700: #5c563d;
  --color-silver-fern-800: #48432c;
  --color-silver-fern-900: #373320;
  --color-silver-fern-950: #221f12;
  --color-cloudless: #ddedff;
  --color-cloudless-50: #eef6ff;
  --color-cloudless-100: #ddedff;
  --color-cloudless-200: #cdd9e6;
  --color-cloudless-300: #b5c2d1;
  --color-cloudless-400: #95a3b3;
  --color-cloudless-500: #798898;
  --color-cloudless-600: #606d7d;
  --color-cloudless-700: #4a5764;
  --color-cloudless-800: #394450;
  --color-cloudless-900: #2b343e;
  --color-cloudless-950: #192027;
}