Icy Plains to Merguez Color Palette

About this palette

Icy Plains to Merguez is a 5-color cool palette: #CFD5FF (Icy Plains), #40C7D6 (Sea Serpent), #8F8800 (Captain Kirk), #564AB6 (Royal Nightcore), #5E0025 (Merguez). It mixes purple, turquoise, yellow, red tones and feels cool overall. The strongest text pairing is #CFD5FF on #5E0025 with a contrast ratio of 9.73:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Icy Plains	rgb(207, 213, 255)	hsl(232, 100%, 91%)
Sea Serpent	rgb(64, 199, 214)	hsl(186, 65%, 55%)
Captain Kirk	rgb(143, 136, 0)	hsl(57, 100%, 28%)
Royal Nightcore	rgb(86, 74, 182)	hsl(247, 43%, 50%)
Merguez	rgb(94, 0, 37)	hsl(336, 100%, 18%)

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.73:1 Very good#CFD5FF on #5E0025
Aa9.73:1 Very good#5E0025 on #CFD5FF
Aa6.89:1 Good#40C7D6 on #5E0025
Aa6.89:1 Good#5E0025 on #40C7D6
Aa4.79:1 Good#CFD5FF on #564AB6
Aa4.79:1 Good#564AB6 on #CFD5FF
Aa3.79:1 Poor#8F8800 on #5E0025
Aa3.79:1 Poor#5E0025 on #8F8800

Color blindness preview

CSS variables

/* Icy Plains to Merguez — https://swatchly.xyz/palette/cfd5ff-40c7d6-8f8800-564ab6-5e0025 */
:root {
  --icy-plains: #cfd5ff;
  --sea-serpent: #40c7d6;
  --captain-kirk: #8f8800;
  --royal-nightcore: #564ab6;
  --merguez: #5e0025;
}

Tailwind CSS v4

/* Icy Plains to Merguez — https://swatchly.xyz/palette/cfd5ff-40c7d6-8f8800-564ab6-5e0025 */
@theme {
  --color-icy-plains: #cfd5ff;
  --color-icy-plains-50: #f3f5ff;
  --color-icy-plains-100: #e7eaff;
  --color-icy-plains-200: #cfd5ff;
  --color-icy-plains-300: #babfe2;
  --color-icy-plains-400: #9a9fc5;
  --color-icy-plains-500: #7e83aa;
  --color-icy-plains-600: #64698d;
  --color-icy-plains-700: #4e5273;
  --color-icy-plains-800: #3c405c;
  --color-icy-plains-900: #2e3149;
  --color-icy-plains-950: #1c1e2f;
  --color-sea-serpent: #40c7d6;
  --color-sea-serpent-50: #c5f8ff;
  --color-sea-serpent-100: #a2f1fb;
  --color-sea-serpent-200: #7ddde9;
  --color-sea-serpent-300: #40c7d6;
  --color-sea-serpent-400: #11a9b8;
  --color-sea-serpent-500: #008e9a;
  --color-sea-serpent-600: #00737d;
  --color-sea-serpent-700: #005c65;
  --color-sea-serpent-800: #004a51;
  --color-sea-serpent-900: #003b40;
  --color-sea-serpent-950: #002529;
  --color-captain-kirk: #8f8800;
  --color-captain-kirk-50: #fbf9c0;
  --color-captain-kirk-100: #f1efaf;
  --color-captain-kirk-200: #dedb8e;
  --color-captain-kirk-300: #c9c46a;
  --color-captain-kirk-400: #aaa43a;
  --color-captain-kirk-500: #8f8800;
  --color-captain-kirk-600: #736d00;
  --color-captain-kirk-700: #5b5700;
  --color-captain-kirk-800: #474400;
  --color-captain-kirk-900: #373400;
  --color-captain-kirk-950: #222000;
  --color-royal-nightcore: #564ab6;
  --color-royal-nightcore-50: #f3f4ff;
  --color-royal-nightcore-100: #e8e9ff;
  --color-royal-nightcore-200: #d3d5ff;
  --color-royal-nightcore-300: #bcbdff;
  --color-royal-nightcore-400: #9b98ff;
  --color-royal-nightcore-500: #827beb;
  --color-royal-nightcore-600: #6a61ce;
  --color-royal-nightcore-700: #564ab6;
  --color-royal-nightcore-800: #433893;
  --color-royal-nightcore-900: #332977;
  --color-royal-nightcore-950: #1f1751;
  --color-merguez: #5e0025;
  --color-merguez-50: #fff1f3;
  --color-merguez-100: #ffe3e7;
  --color-merguez-200: #ffc6d0;
  --color-merguez-300: #fca4b5;
  --color-merguez-400: #df8094;
  --color-merguez-500: #c26278;
  --color-merguez-600: #a3485e;
  --color-merguez-700: #853348;
  --color-merguez-800: #6a2336;
  --color-merguez-900: #5e0025;
  --color-merguez-950: #360c17;
}