Icy Plains to Night Shift color palette

D1D7FBIcy Plains 62B6D0High Dive 008894Cruising 00344FSea of Stars 7984BCOrbital 335B70Night Shift

Open in generator Export PNG, PDF, ASE…

About this palette

Icy Plains to Night Shift is a 6-color cool palette: #D1D7FB (Icy Plains), #62B6D0 (High Dive), #008894 (Cruising), #00344F (Sea of Stars), #7984BC (Orbital), #335B70 (Night Shift). It mixes purple, blue, turquoise tones and feels cool overall. The strongest text pairing is #D1D7FB on #00344F with a contrast ratio of 9.24:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Icy Plains	rgb(209, 215, 251)	hsl(231, 84%, 90%)
High Dive	rgb(98, 182, 208)	hsl(194, 54%, 60%)
Cruising	rgb(0, 136, 148)	hsl(185, 100%, 29%)
Sea of Stars	rgb(0, 52, 79)	hsl(201, 100%, 15%)
Orbital	rgb(121, 132, 188)	hsl(230, 33%, 61%)
Night Shift	rgb(51, 91, 112)	hsl(201, 37%, 32%)

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.24:1 Very good#D1D7FB on #00344F
Aa9.24:1 Very good#00344F on #D1D7FB
Aa5.69:1 Good#62B6D0 on #00344F
Aa5.69:1 Good#00344F on #62B6D0
Aa5.16:1 Good#D1D7FB on #335B70
Aa5.16:1 Good#335B70 on #D1D7FB
Aa3.64:1 Poor#00344F on #7984BC
Aa3.64:1 Poor#7984BC on #00344F

Color blindness preview

CSS variables

/* Icy Plains to Night Shift — https://swatchly.xyz/palette/d1d7fb-62b6d0-008894-00344f-7984bc-335b70 */
:root {
  --icy-plains: #d1d7fb;
  --high-dive: #62b6d0;
  --cruising: #008894;
  --sea-of-stars: #00344f;
  --orbital: #7984bc;
  --night-shift: #335b70;
}

Tailwind CSS v4

/* Icy Plains to Night Shift — https://swatchly.xyz/palette/d1d7fb-62b6d0-008894-00344f-7984bc-335b70 */
@theme {
  --color-icy-plains: #d1d7fb;
  --color-icy-plains-50: #f4f6ff;
  --color-icy-plains-100: #e8ecff;
  --color-icy-plains-200: #d1d7fb;
  --color-icy-plains-300: #bbc0de;
  --color-icy-plains-400: #9ba0c1;
  --color-icy-plains-500: #7f85a5;
  --color-icy-plains-600: #656a89;
  --color-icy-plains-700: #4f536f;
  --color-icy-plains-800: #3d4059;
  --color-icy-plains-900: #2e3146;
  --color-icy-plains-950: #1c1e2d;
  --color-high-dive: #62b6d0;
  --color-high-dive-50: #edfaff;
  --color-high-dive-100: #d7f5ff;
  --color-high-dive-200: #aee7fa;
  --color-high-dive-300: #90d3e9;
  --color-high-dive-400: #62b6d0;
  --color-high-dive-500: #4498b2;
  --color-high-dive-600: #227c94;
  --color-high-dive-700: #016379;
  --color-high-dive-800: #004d5f;
  --color-high-dive-900: #003a49;
  --color-high-dive-950: #00242e;
  --color-cruising: #008894;
  --color-cruising-50: #dffbff;
  --color-cruising-100: #c5f9ff;
  --color-cruising-200: #a5eaf3;
  --color-cruising-300: #86d7e1;
  --color-cruising-400: #5bbbc6;
  --color-cruising-500: #35a1ad;
  --color-cruising-600: #008894;
  --color-cruising-700: #006c76;
  --color-cruising-800: #00545c;
  --color-cruising-900: #004147;
  --color-cruising-950: #00282d;
  --color-sea-of-stars: #00344f;
  --color-sea-of-stars-50: #ecf7ff;
  --color-sea-of-stars-100: #d8efff;
  --color-sea-of-stars-200: #b9ddf6;
  --color-sea-of-stars-300: #9ec7e4;
  --color-sea-of-stars-400: #7aa7c6;
  --color-sea-of-stars-500: #5d8bab;
  --color-sea-of-stars-600: #43708d;
  --color-sea-of-stars-700: #2f5873;
  --color-sea-of-stars-800: #20445b;
  --color-sea-of-stars-900: #00344f;
  --color-sea-of-stars-950: #0a1f2d;
  --color-orbital: #7984bc;
  --color-orbital-50: #f3f5ff;
  --color-orbital-100: #e6ebff;
  --color-orbital-200: #cdd6ff;
  --color-orbital-300: #b4bff2;
  --color-orbital-400: #949fd7;
  --color-orbital-500: #7984bc;
  --color-orbital-600: #5f699e;
  --color-orbital-700: #4a5283;
  --color-orbital-800: #383f6a;
  --color-orbital-900: #2a3054;
  --color-orbital-950: #191d37;
  --color-night-shift: #335b70;
  --color-night-shift-50: #eaf7ff;
  --color-night-shift-100: #d5f0ff;
  --color-night-shift-200: #bdddef;
  --color-night-shift-300: #a3c7dc;
  --color-night-shift-400: #80a8be;
  --color-night-shift-500: #648da3;
  --color-night-shift-600: #4a7287;
  --color-night-shift-700: #335b70;
  --color-night-shift-800: #274758;
  --color-night-shift-900: #1b3745;
  --color-night-shift-950: #0e222c;
}