Icy Plains to Midnight Masquerade Color Palette

About this palette

Icy Plains to Midnight Masquerade is a 5-color muted, cool, vintage palette: #D4E0FF (Icy Plains), #DDC391 (Halo), #9C9072 (Gramps Shoehorn), #485977 (Deep Indigo), #233149 (Midnight Masquerade). It mixes blue, yellow tones and feels cool overall. The strongest text pairing is #D4E0FF on #233149 with a contrast ratio of 9.90:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Icy Plains	rgb(212, 224, 255)	hsl(223, 100%, 92%)
Halo	rgb(221, 195, 145)	hsl(39, 53%, 72%)
Gramps Shoehorn	rgb(156, 144, 114)	hsl(43, 18%, 53%)
Deep Indigo	rgb(72, 89, 119)	hsl(218, 25%, 37%)
Midnight Masquerade	rgb(35, 49, 73)	hsl(218, 35%, 21%)

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.90:1 Very good#D4E0FF on #233149
Aa9.90:1 Very good#233149 on #D4E0FF
Aa7.65:1 Very good#DDC391 on #233149
Aa7.65:1 Very good#233149 on #DDC391
Aa5.35:1 Good#D4E0FF on #485977
Aa5.35:1 Good#485977 on #D4E0FF
Aa4.14:1 Poor#DDC391 on #485977
Aa4.14:1 Poor#485977 on #DDC391

Color blindness preview

CSS variables

/* Icy Plains to Midnight Masquerade — https://swatchly.xyz/palette/d4e0ff-ddc391-9c9072-485977-233149 */
:root {
  --icy-plains: #d4e0ff;
  --halo: #ddc391;
  --gramps-shoehorn: #9c9072;
  --deep-indigo: #485977;
  --midnight-masquerade: #233149;
}

Tailwind CSS v4

/* Icy Plains to Midnight Masquerade — https://swatchly.xyz/palette/d4e0ff-ddc391-9c9072-485977-233149 */
@theme {
  --color-icy-plains: #d4e0ff;
  --color-icy-plains-50: #fafbff;
  --color-icy-plains-100: #eef3ff;
  --color-icy-plains-200: #d4e0ff;
  --color-icy-plains-300: #bec8e1;
  --color-icy-plains-400: #9ca7c2;
  --color-icy-plains-500: #7f8aa6;
  --color-icy-plains-600: #646e89;
  --color-icy-plains-700: #4d566e;
  --color-icy-plains-800: #3a4257;
  --color-icy-plains-900: #2c3244;
  --color-icy-plains-950: #1a1f2c;
  --color-halo: #ddc391;
  --color-halo-50: #fff7e8;
  --color-halo-100: #fdedcf;
  --color-halo-200: #eddab6;
  --color-halo-300: #ddc391;
  --color-halo-400: #bba375;
  --color-halo-500: #9f8656;
  --color-halo-600: #826b3c;
  --color-halo-700: #695328;
  --color-halo-800: #534019;
  --color-halo-900: #40300f;
  --color-halo-950: #291d06;
  --color-gramps-shoehorn: #9c9072;
  --color-gramps-shoehorn-50: #fef7e5;
  --color-gramps-shoehorn-100: #f6efdc;
  --color-gramps-shoehorn-200: #e6ddc6;
  --color-gramps-shoehorn-300: #d2c8ae;
  --color-gramps-shoehorn-400: #b5aa8d;
  --color-gramps-shoehorn-500: #9c9072;
  --color-gramps-shoehorn-600: #7f7357;
  --color-gramps-shoehorn-700: #665b40;
  --color-gramps-shoehorn-800: #50462f;
  --color-gramps-shoehorn-900: #3d3521;
  --color-gramps-shoehorn-950: #262012;
  --color-deep-indigo: #485977;
  --color-deep-indigo-50: #f0f5ff;
  --color-deep-indigo-100: #e1ecff;
  --color-deep-indigo-200: #cad9f3;
  --color-deep-indigo-300: #b2c3e0;
  --color-deep-indigo-400: #92a4c4;
  --color-deep-indigo-500: #7789aa;
  --color-deep-indigo-600: #5e6f8e;
  --color-deep-indigo-700: #485977;
  --color-deep-indigo-800: #37455e;
  --color-deep-indigo-900: #29354a;
  --color-deep-indigo-950: #182130;
  --color-midnight-masquerade: #233149;
  --color-midnight-masquerade-50: #f0f5ff;
  --color-midnight-masquerade-100: #e1ecff;
  --color-midnight-masquerade-200: #cbd8ef;
  --color-midnight-masquerade-300: #b2c2dc;
  --color-midnight-masquerade-400: #91a2be;
  --color-midnight-masquerade-500: #7586a2;
  --color-midnight-masquerade-600: #5c6b86;
  --color-midnight-masquerade-700: #46546c;
  --color-midnight-masquerade-800: #354156;
  --color-midnight-masquerade-900: #233149;
  --color-midnight-masquerade-950: #171e2a;
}