Piccadilly Purple to Breeze Color Palette

About this palette

Piccadilly Purple to Breeze is a 5-color cool palette: #4C5594 (Piccadilly Purple), #382D52 (Midnight Pie), #EEEAFF (Foundation White), #BE7EB3 (Romanov Mauve), #AEC8F3 (Breeze). It mixes purple, white, pink, blue tones and feels cool overall. The strongest text pairing is #382D52 on #EEEAFF with a contrast ratio of 10.72:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Piccadilly Purple	rgb(76, 85, 148)	hsl(232, 32%, 44%)
Midnight Pie	rgb(56, 45, 82)	hsl(258, 29%, 25%)
Foundation White	rgb(238, 234, 255)	hsl(251, 100%, 96%)
Romanov Mauve	rgb(190, 126, 179)	hsl(310, 33%, 62%)
Breeze	rgb(174, 200, 243)	hsl(217, 74%, 82%)

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.72:1 Very good#382D52 on #EEEAFF
Aa10.72:1 Very good#EEEAFF on #382D52
Aa7.42:1 Very good#382D52 on #AEC8F3
Aa7.42:1 Very good#AEC8F3 on #382D52
Aa5.88:1 Good#4C5594 on #EEEAFF
Aa5.88:1 Good#EEEAFF on #4C5594
Aa4.10:1 Poor#382D52 on #BE7EB3
Aa4.10:1 Poor#BE7EB3 on #382D52

Color blindness preview

CSS variables

/* Piccadilly Purple to Breeze — https://swatchly.xyz/palette/4c5594-382d52-eeeaff-be7eb3-aec8f3 */
:root {
  --piccadilly-purple: #4c5594;
  --midnight-pie: #382d52;
  --foundation-white: #eeeaff;
  --romanov-mauve: #be7eb3;
  --breeze: #aec8f3;
}

Tailwind CSS v4

/* Piccadilly Purple to Breeze — https://swatchly.xyz/palette/4c5594-382d52-eeeaff-be7eb3-aec8f3 */
@theme {
  --color-piccadilly-purple: #4c5594;
  --color-piccadilly-purple-50: #f2f5ff;
  --color-piccadilly-purple-100: #e5eaff;
  --color-piccadilly-purple-200: #ced6ff;
  --color-piccadilly-purple-300: #b3bffb;
  --color-piccadilly-purple-400: #94a0e2;
  --color-piccadilly-purple-500: #7985c8;
  --color-piccadilly-purple-600: #616bac;
  --color-piccadilly-purple-700: #4c5594;
  --color-piccadilly-purple-800: #3b4276;
  --color-piccadilly-purple-900: #2c325e;
  --color-piccadilly-purple-950: #1a1e3f;
  --color-midnight-pie: #382d52;
  --color-midnight-pie-50: #f6f3ff;
  --color-midnight-pie-100: #ede7ff;
  --color-midnight-pie-200: #dad2f4;
  --color-midnight-pie-300: #c4bae1;
  --color-midnight-pie-400: #a59ac5;
  --color-midnight-pie-500: #8a7faa;
  --color-midnight-pie-600: #70658e;
  --color-midnight-pie-700: #5a5075;
  --color-midnight-pie-800: #473e5e;
  --color-midnight-pie-900: #382d52;
  --color-midnight-pie-950: #221d31;
  --color-foundation-white: #eeeaff;
  --color-foundation-white-50: #f7f5ff;
  --color-foundation-white-100: #eeeaff;
  --color-foundation-white-200: #dad7e6;
  --color-foundation-white-300: #c3c0d1;
  --color-foundation-white-400: #a3a0b2;
  --color-foundation-white-500: #878497;
  --color-foundation-white-600: #6d697b;
  --color-foundation-white-700: #565363;
  --color-foundation-white-800: #43404e;
  --color-foundation-white-900: #33313d;
  --color-foundation-white-950: #201e26;
  --color-romanov-mauve: #be7eb3;
  --color-romanov-mauve-50: #ffeafb;
  --color-romanov-mauve-100: #ffd7f7;
  --color-romanov-mauve-200: #f2bde8;
  --color-romanov-mauve-300: #dda2d2;
  --color-romanov-mauve-400: #be7eb3;
  --color-romanov-mauve-500: #a36599;
  --color-romanov-mauve-600: #884d7e;
  --color-romanov-mauve-700: #6f3b67;
  --color-romanov-mauve-800: #5a2c53;
  --color-romanov-mauve-900: #482142;
  --color-romanov-mauve-950: #30132b;
  --color-breeze: #aec8f3;
  --color-breeze-50: #f4f8ff;
  --color-breeze-100: #e7f0ff;
  --color-breeze-200: #cbdefd;
  --color-breeze-300: #aec8f3;
  --color-breeze-400: #8fa7cf;
  --color-breeze-500: #738bb3;
  --color-breeze-600: #586f95;
  --color-breeze-700: #43577a;
  --color-breeze-800: #314361;
  --color-breeze-900: #24334c;
  --color-breeze-950: #151f31;
}