Icy Plains to Midnight Express color palette

D6DFFFIcy Plains 869CC3Sailing 617B98Quiet Harbour 514461Nightly Walk 262635Midnight Express

About this palette

Icy Plains to Midnight Express is a 5-color muted, cool, gradient palette: #D6DFFF (Icy Plains), #869CC3 (Sailing), #617B98 (Quiet Harbour), #514461 (Nightly Walk), #262635 (Midnight Express). It mixes blue, purple, gray tones and feels cool overall. The strongest text pairing is #D6DFFF on #262635 with a contrast ratio of 11.24:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Icy Plains	rgb(214, 223, 255)	hsl(227, 100%, 92%)
Sailing	rgb(134, 156, 195)	hsl(218, 34%, 65%)
Quiet Harbour	rgb(97, 123, 152)	hsl(212, 22%, 49%)
Nightly Walk	rgb(81, 68, 97)	hsl(267, 18%, 32%)
Midnight Express	rgb(38, 38, 53)	hsl(240, 16%, 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.

Aa11.24:1 Very good#D6DFFF on #262635
Aa11.24:1 Very good#262635 on #D6DFFF
Aa6.75:1 Good#D6DFFF on #514461
Aa6.75:1 Good#514461 on #D6DFFF
Aa5.36:1 Good#869CC3 on #262635
Aa5.36:1 Good#262635 on #869CC3
Aa3.40:1 Poor#617B98 on #262635
Aa3.40:1 Poor#262635 on #617B98

Color blindness preview

CSS variables

/* Icy Plains to Midnight Express — https://swatchly.xyz/palette/d6dfff-869cc3-617b98-514461-262635 */
:root {
  --icy-plains: #d6dfff;
  --sailing: #869cc3;
  --quiet-harbour: #617b98;
  --nightly-walk: #514461;
  --midnight-express: #262635;
}

Tailwind CSS v4

/* Icy Plains to Midnight Express — https://swatchly.xyz/palette/d6dfff-869cc3-617b98-514461-262635 */
@theme {
  --color-icy-plains: #d6dfff;
  --color-icy-plains-50: #fafbff;
  --color-icy-plains-100: #eef2ff;
  --color-icy-plains-200: #d6dfff;
  --color-icy-plains-300: #c0c7e1;
  --color-icy-plains-400: #9ea6c2;
  --color-icy-plains-500: #8189a6;
  --color-icy-plains-600: #666d89;
  --color-icy-plains-700: #4f556e;
  --color-icy-plains-800: #3c4157;
  --color-icy-plains-900: #2d3244;
  --color-icy-plains-950: #1b1f2c;
  --color-sailing: #869cc3;
  --color-sailing-50: #edf3ff;
  --color-sailing-100: #dce9ff;
  --color-sailing-200: #c2d4f4;
  --color-sailing-300: #a8bce0;
  --color-sailing-400: #869cc3;
  --color-sailing-500: #6c82a7;
  --color-sailing-600: #54688c;
  --color-sailing-700: #415373;
  --color-sailing-800: #31415c;
  --color-sailing-900: #25324a;
  --color-sailing-950: #161f30;
  --color-quiet-harbour: #617b98;
  --color-quiet-harbour-50: #eef6ff;
  --color-quiet-harbour-100: #e1efff;
  --color-quiet-harbour-200: #cadff6;
  --color-quiet-harbour-300: #b3cbe5;
  --color-quiet-harbour-400: #94adca;
  --color-quiet-harbour-500: #7994b2;
  --color-quiet-harbour-600: #617b98;
  --color-quiet-harbour-700: #4a627c;
  --color-quiet-harbour-800: #374c63;
  --color-quiet-harbour-900: #283a4e;
  --color-quiet-harbour-950: #172432;
  --color-nightly-walk: #514461;
  --color-nightly-walk-50: #f8f2ff;
  --color-nightly-walk-100: #f0e6fc;
  --color-nightly-walk-200: #ddd2ec;
  --color-nightly-walk-300: #c9bcd9;
  --color-nightly-walk-400: #ab9ebd;
  --color-nightly-walk-500: #9284a4;
  --color-nightly-walk-600: #786b8a;
  --color-nightly-walk-700: #635673;
  --color-nightly-walk-800: #514461;
  --color-nightly-walk-900: #3e344a;
  --color-nightly-walk-950: #282131;
  --color-midnight-express: #262635;
  --color-midnight-express-50: #f4f4ff;
  --color-midnight-express-100: #e9eaf7;
  --color-midnight-express-200: #d5d6e5;
  --color-midnight-express-300: #bfbfd0;
  --color-midnight-express-400: #9fa0b2;
  --color-midnight-express-500: #868698;
  --color-midnight-express-600: #6d6d7f;
  --color-midnight-express-700: #585869;
  --color-midnight-express-800: #474756;
  --color-midnight-express-900: #393946;
  --color-midnight-express-950: #262635;
}