Pastel Blue to Possessed Purple color palette

A4C3FFPastel Blue A6A2DBImperial Lilac A481B9Heart Potion 9E6098Bermuda Onion 953C78Grape Riot 890659Possessed Purple

Open in generator Export PNG, PDF, ASE…

About this palette

Pastel Blue to Possessed Purple is a 6-color gradient palette: #A4C3FF (Pastel Blue), #A6A2DB (Imperial Lilac), #A481B9 (Heart Potion), #9E6098 (Bermuda Onion), #953C78 (Grape Riot), #890659 (Possessed Purple). It mixes blue, purple, pink, red tones and feels balanced overall. The strongest text pairing is #A4C3FF on #890659 with a contrast ratio of 5.29:1, and 1 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pastel Blue	rgb(164, 195, 255)	hsl(220, 100%, 82%)
Imperial Lilac	rgb(166, 162, 219)	hsl(244, 44%, 75%)
Heart Potion	rgb(164, 129, 185)	hsl(278, 29%, 62%)
Bermuda Onion	rgb(158, 96, 152)	hsl(306, 24%, 50%)
Grape Riot	rgb(149, 60, 120)	hsl(320, 43%, 41%)
Possessed Purple	rgb(137, 6, 89)	hsl(322, 92%, 28%)

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.

Aa5.29:1 Good#A4C3FF on #890659
Aa5.29:1 Good#890659 on #A4C3FF
Aa3.94:1 Poor#A6A2DB on #890659
Aa3.94:1 Poor#890659 on #A6A2DB
Aa3.70:1 Poor#A4C3FF on #953C78
Aa3.70:1 Poor#953C78 on #A4C3FF

Color blindness preview

CSS variables

/* Pastel Blue to Possessed Purple — https://swatchly.xyz/palette/a4c3ff-a6a2db-a481b9-9e6098-953c78-890659 */
:root {
  --pastel-blue: #a4c3ff;
  --imperial-lilac: #a6a2db;
  --heart-potion: #a481b9;
  --bermuda-onion: #9e6098;
  --grape-riot: #953c78;
  --possessed-purple: #890659;
}

Tailwind CSS v4

/* Pastel Blue to Possessed Purple — https://swatchly.xyz/palette/a4c3ff-a6a2db-a481b9-9e6098-953c78-890659 */
@theme {
  --color-pastel-blue: #a4c3ff;
  --color-pastel-blue-50: #f2f6ff;
  --color-pastel-blue-100: #e3edff;
  --color-pastel-blue-200: #c6daff;
  --color-pastel-blue-300: #a4c3ff;
  --color-pastel-blue-400: #86a3db;
  --color-pastel-blue-500: #6a87bf;
  --color-pastel-blue-600: #516ca1;
  --color-pastel-blue-700: #3d5585;
  --color-pastel-blue-800: #2d416c;
  --color-pastel-blue-900: #203255;
  --color-pastel-blue-950: #121e38;
  --color-imperial-lilac: #a6a2db;
  --color-imperial-lilac-50: #f7f7ff;
  --color-imperial-lilac-100: #eeedff;
  --color-imperial-lilac-200: #dad9ff;
  --color-imperial-lilac-300: #c5c2f2;
  --color-imperial-lilac-400: #a6a2db;
  --color-imperial-lilac-500: #8985bc;
  --color-imperial-lilac-600: #6e699e;
  --color-imperial-lilac-700: #565282;
  --color-imperial-lilac-800: #433e68;
  --color-imperial-lilac-900: #322e51;
  --color-imperial-lilac-950: #1e1b34;
  --color-heart-potion: #a481b9;
  --color-heart-potion-50: #fbf4ff;
  --color-heart-potion-100: #f7eaff;
  --color-heart-potion-200: #ecd2fc;
  --color-heart-potion-300: #d9bbec;
  --color-heart-potion-400: #bd9cd2;
  --color-heart-potion-500: #a481b9;
  --color-heart-potion-600: #87659a;
  --color-heart-potion-700: #6c4d7f;
  --color-heart-potion-800: #553a65;
  --color-heart-potion-900: #422b4f;
  --color-heart-potion-950: #291933;
  --color-bermuda-onion: #9e6098;
  --color-bermuda-onion-50: #ffecfc;
  --color-bermuda-onion-100: #ffd8fa;
  --color-bermuda-onion-200: #f2bdeb;
  --color-bermuda-onion-300: #dca1d6;
  --color-bermuda-onion-400: #bc7db6;
  --color-bermuda-onion-500: #9e6098;
  --color-bermuda-onion-600: #83497e;
  --color-bermuda-onion-700: #6b3766;
  --color-bermuda-onion-800: #562952;
  --color-bermuda-onion-900: #451e42;
  --color-bermuda-onion-950: #2d112b;
  --color-grape-riot: #953c78;
  --color-grape-riot-50: #fff0f9;
  --color-grape-riot-100: #ffdff1;
  --color-grape-riot-200: #ffbce5;
  --color-grape-riot-300: #f29cd1;
  --color-grape-riot-400: #d377b2;
  --color-grape-riot-500: #b45995;
  --color-grape-riot-600: #953c78;
  --color-grape-riot-700: #792c60;
  --color-grape-riot-800: #621e4d;
  --color-grape-riot-900: #4e153c;
  --color-grape-riot-950: #330a26;
  --color-possessed-purple: #890659;
  --color-possessed-purple-50: #fff1f7;
  --color-possessed-purple-100: #ffe2ee;
  --color-possessed-purple-200: #ffc1dd;
  --color-possessed-purple-300: #ff97ca;
  --color-possessed-purple-400: #e56cab;
  --color-possessed-purple-500: #c64c8e;
  --color-possessed-purple-600: #a43071;
  --color-possessed-purple-700: #890659;
  --color-possessed-purple-800: #6a0c45;
  --color-possessed-purple-900: #550435;
  --color-possessed-purple-950: #370121;
}