Icy Plains to Deep Space Rodeo Color Palette

About this palette

Icy Plains to Deep Space Rodeo is a 5-color cool, gradient palette: #D6DCFF (Icy Plains), #E8ABFF (Mauve), #5E9BED (Polar Glow), #3261AC (Wing Commander), #352383 (Deep Space Rodeo). It mixes purple, blue tones and feels cool overall. The strongest text pairing is #D6DCFF on #352383 with a contrast ratio of 9.04:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Icy Plains	rgb(214, 220, 255)	hsl(231, 100%, 92%)
Mauve	rgb(232, 171, 255)	hsl(284, 100%, 84%)
Polar Glow	rgb(94, 155, 237)	hsl(214, 80%, 65%)
Wing Commander	rgb(50, 97, 172)	hsl(217, 55%, 44%)
Deep Space Rodeo	rgb(53, 35, 131)	hsl(251, 58%, 33%)

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.

Aa9.04:1 Very good#D6DCFF on #352383
Aa9.04:1 Very good#352383 on #D6DCFF
Aa6.80:1 Good#E8ABFF on #352383
Aa6.80:1 Good#352383 on #E8ABFF
Aa4.52:1 Good#D6DCFF on #3261AC
Aa4.52:1 Good#3261AC on #D6DCFF
Aa4.30:1 Poor#5E9BED on #352383
Aa4.30:1 Poor#352383 on #5E9BED

Color blindness preview

CSS variables

/* Icy Plains to Deep Space Rodeo — https://swatchly.xyz/palette/d6dcff-e8abff-5e9bed-3261ac-352383 */
:root {
  --icy-plains: #d6dcff;
  --mauve: #e8abff;
  --polar-glow: #5e9bed;
  --wing-commander: #3261ac;
  --deep-space-rodeo: #352383;
}

Tailwind CSS v4

/* Icy Plains to Deep Space Rodeo — https://swatchly.xyz/palette/d6dcff-e8abff-5e9bed-3261ac-352383 */
@theme {
  --color-icy-plains: #d6dcff;
  --color-icy-plains-50: #f8f9ff;
  --color-icy-plains-100: #edf0ff;
  --color-icy-plains-200: #d6dcff;
  --color-icy-plains-300: #c0c5e1;
  --color-icy-plains-400: #9ea4c3;
  --color-icy-plains-500: #8287a7;
  --color-icy-plains-600: #676c8a;
  --color-icy-plains-700: #50546f;
  --color-icy-plains-800: #3d4058;
  --color-icy-plains-900: #2e3145;
  --color-icy-plains-950: #1c1e2c;
  --color-mauve: #e8abff;
  --color-mauve-50: #fcf5ff;
  --color-mauve-100: #f9e8ff;
  --color-mauve-200: #f1cdff;
  --color-mauve-300: #e8abff;
  --color-mauve-400: #c58cda;
  --color-mauve-500: #a86fbe;
  --color-mauve-600: #8b53a0;
  --color-mauve-700: #713e83;
  --color-mauve-800: #5a2d6a;
  --color-mauve-900: #462053;
  --color-mauve-950: #2d1136;
  --color-polar-glow: #5e9bed;
  --color-polar-glow-50: #eaf3ff;
  --color-polar-glow-100: #d8e9ff;
  --color-polar-glow-200: #b5d4ff;
  --color-polar-glow-300: #8cbdff;
  --color-polar-glow-400: #5e9bed;
  --color-polar-glow-500: #4480d0;
  --color-polar-glow-600: #2c66b2;
  --color-polar-glow-700: #1b5195;
  --color-polar-glow-800: #0e3f7a;
  --color-polar-glow-900: #063063;
  --color-polar-glow-950: #021e43;
  --color-wing-commander: #3261ac;
  --color-wing-commander-50: #f0f6ff;
  --color-wing-commander-100: #ddeaff;
  --color-wing-commander-200: #bbd6ff;
  --color-wing-commander-300: #94bdff;
  --color-wing-commander-400: #6a9be9;
  --color-wing-commander-500: #4d7ecb;
  --color-wing-commander-600: #3261ac;
  --color-wing-commander-700: #234c8d;
  --color-wing-commander-800: #173b73;
  --color-wing-commander-900: #0f2d5d;
  --color-wing-commander-950: #061b3e;
  --color-deep-space-rodeo: #352383;
  --color-deep-space-rodeo-50: #f3f4ff;
  --color-deep-space-rodeo-100: #e8e9ff;
  --color-deep-space-rodeo-200: #d2d3ff;
  --color-deep-space-rodeo-300: #b8b9ff;
  --color-deep-space-rodeo-400: #9895fa;
  --color-deep-space-rodeo-500: #7f79e0;
  --color-deep-space-rodeo-600: #675fc2;
  --color-deep-space-rodeo-700: #534aa6;
  --color-deep-space-rodeo-800: #42398b;
  --color-deep-space-rodeo-900: #352383;
  --color-deep-space-rodeo-950: #211a4f;
}