Cloudless to Viola Color Palette

About this palette

Cloudless to Viola is a 5-color cool palette: #DEEAFF (Cloudless), #DCA4E7 (Candy Floss), #3C5990 (Glimpse of Void), #3B2D59 (Midnight Pie), #8879CC (Viola). It mixes white, purple, blue tones and feels cool overall. The strongest text pairing is #DEEAFF on #3B2D59 with a contrast ratio of 10.15:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cloudless	rgb(222, 234, 255)	hsl(218, 100%, 94%)
Candy Floss	rgb(220, 164, 231)	hsl(290, 58%, 77%)
Glimpse of Void	rgb(60, 89, 144)	hsl(219, 41%, 40%)
Midnight Pie	rgb(59, 45, 89)	hsl(259, 33%, 26%)
Viola	rgb(136, 121, 204)	hsl(251, 45%, 64%)

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.

Aa10.15:1 Very good#DEEAFF on #3B2D59
Aa10.15:1 Very good#3B2D59 on #DEEAFF
Aa6.16:1 Good#DCA4E7 on #3B2D59
Aa6.16:1 Good#3B2D59 on #DCA4E7
Aa5.73:1 Good#DEEAFF on #3C5990
Aa5.73:1 Good#3C5990 on #DEEAFF
Aa3.47:1 Poor#DCA4E7 on #3C5990
Aa3.47:1 Poor#3C5990 on #DCA4E7

Color blindness preview

CSS variables

/* Cloudless to Viola — https://swatchly.xyz/palette/deeaff-dca4e7-3c5990-3b2d59-8879cc */
:root {
  --cloudless: #deeaff;
  --candy-floss: #dca4e7;
  --glimpse-of-void: #3c5990;
  --midnight-pie: #3b2d59;
  --viola: #8879cc;
}

Tailwind CSS v4

/* Cloudless to Viola — https://swatchly.xyz/palette/deeaff-dca4e7-3c5990-3b2d59-8879cc */
@theme {
  --color-cloudless: #deeaff;
  --color-cloudless-50: #eef4ff;
  --color-cloudless-100: #deeaff;
  --color-cloudless-200: #ced6e6;
  --color-cloudless-300: #b6c0d2;
  --color-cloudless-400: #96a1b4;
  --color-cloudless-500: #7b8699;
  --color-cloudless-600: #626c7e;
  --color-cloudless-700: #4c5666;
  --color-cloudless-800: #3b4351;
  --color-cloudless-900: #2c333f;
  --color-cloudless-950: #1b1f28;
  --color-candy-floss: #dca4e7;
  --color-candy-floss-50: #fcecff;
  --color-candy-floss-100: #f9dcff;
  --color-candy-floss-200: #edc1f5;
  --color-candy-floss-300: #dca4e7;
  --color-candy-floss-400: #bb87c6;
  --color-candy-floss-500: #a16cab;
  --color-candy-floss-600: #85538f;
  --color-candy-floss-700: #6d3f76;
  --color-candy-floss-800: #572f5f;
  --color-candy-floss-900: #45234c;
  --color-candy-floss-950: #2c1431;
  --color-glimpse-of-void: #3c5990;
  --color-glimpse-of-void-50: #f0f5ff;
  --color-glimpse-of-void-100: #e1ecff;
  --color-glimpse-of-void-200: #c4d9ff;
  --color-glimpse-of-void-300: #a7c4f8;
  --color-glimpse-of-void-400: #85a5de;
  --color-glimpse-of-void-500: #6a8ac4;
  --color-glimpse-of-void-600: #516fa8;
  --color-glimpse-of-void-700: #3c5990;
  --color-glimpse-of-void-800: #2d4573;
  --color-glimpse-of-void-900: #21355b;
  --color-glimpse-of-void-950: #12203c;
  --color-midnight-pie: #3b2d59;
  --color-midnight-pie-50: #f6f3ff;
  --color-midnight-pie-100: #ede7ff;
  --color-midnight-pie-200: #dbd0f9;
  --color-midnight-pie-300: #c5b9e7;
  --color-midnight-pie-400: #a699cb;
  --color-midnight-pie-500: #8c7eb1;
  --color-midnight-pie-600: #726595;
  --color-midnight-pie-700: #5c4f7b;
  --color-midnight-pie-800: #493e65;
  --color-midnight-pie-900: #3b2d59;
  --color-midnight-pie-950: #241d36;
  --color-viola: #8879cc;
  --color-viola-50: #f5f4ff;
  --color-viola-100: #ebe9ff;
  --color-viola-200: #d7d2ff;
  --color-viola-300: #c1b7ff;
  --color-viola-400: #a395e7;
  --color-viola-500: #8879cc;
  --color-viola-600: #6e5ead;
  --color-viola-700: #574890;
  --color-viola-800: #443675;
  --color-viola-900: #34285e;
  --color-viola-950: #20173e;
}