Icy Plains to Admiral Blue Color Palette

About this palette

Icy Plains to Admiral Blue is a 4-color muted, cool, monochromatic palette: #CBD7FA (Icy Plains), #252B40 (Eternal Darkness), #838AA9 (Galactic Gossamer), #5A647F (Admiral Blue). It mixes blue, purple tones and feels cool overall. The strongest text pairing is #CBD7FA on #252B40 with a contrast ratio of 9.77:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Icy Plains	rgb(203, 215, 250)	hsl(225, 82%, 89%)
Eternal Darkness	rgb(37, 43, 64)	hsl(227, 27%, 20%)
Galactic Gossamer	rgb(131, 138, 169)	hsl(229, 18%, 59%)
Admiral Blue	rgb(90, 100, 127)	hsl(224, 17%, 43%)

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.77:1 Very good#CBD7FA on #252B40
Aa9.77:1 Very good#252B40 on #CBD7FA
Aa4.12:1 Poor#252B40 on #838AA9
Aa4.12:1 Poor#838AA9 on #252B40
Aa4.11:1 Poor#CBD7FA on #5A647F
Aa4.11:1 Poor#5A647F on #CBD7FA

Color blindness preview

CSS variables

/* Icy Plains to Admiral Blue — https://swatchly.xyz/palette/cbd7fa-252b40-838aa9-5a647f */
:root {
  --icy-plains: #cbd7fa;
  --eternal-darkness: #252b40;
  --galactic-gossamer: #838aa9;
  --admiral-blue: #5a647f;
}

Tailwind CSS v4

/* Icy Plains to Admiral Blue — https://swatchly.xyz/palette/cbd7fa-252b40-838aa9-5a647f */
@theme {
  --color-icy-plains: #cbd7fa;
  --color-icy-plains-50: #f2f5ff;
  --color-icy-plains-100: #e4ebff;
  --color-icy-plains-200: #cbd7fa;
  --color-icy-plains-300: #b6c1de;
  --color-icy-plains-400: #96a1c1;
  --color-icy-plains-500: #7b85a5;
  --color-icy-plains-600: #616b89;
  --color-icy-plains-700: #4b5470;
  --color-icy-plains-800: #3a4159;
  --color-icy-plains-900: #2b3246;
  --color-icy-plains-950: #1a1f2d;
  --color-eternal-darkness: #252b40;
  --color-eternal-darkness-50: #f1f5ff;
  --color-eternal-darkness-100: #e5ebfc;
  --color-eternal-darkness-200: #d0d7eb;
  --color-eternal-darkness-300: #b9c0d7;
  --color-eternal-darkness-400: #979fb9;
  --color-eternal-darkness-500: #7b839c;
  --color-eternal-darkness-600: #60677f;
  --color-eternal-darkness-700: #495065;
  --color-eternal-darkness-800: #363c4e;
  --color-eternal-darkness-900: #252b40;
  --color-eternal-darkness-950: #171a24;
  --color-galactic-gossamer: #838aa9;
  --color-galactic-gossamer-50: #f3f6ff;
  --color-galactic-gossamer-100: #e8ecff;
  --color-galactic-gossamer-200: #d3d9f2;
  --color-galactic-gossamer-300: #bdc3df;
  --color-galactic-gossamer-400: #9ea5c3;
  --color-galactic-gossamer-500: #838aa9;
  --color-galactic-gossamer-600: #686f8c;
  --color-galactic-gossamer-700: #515772;
  --color-galactic-gossamer-800: #3e435b;
  --color-galactic-gossamer-900: #2f3347;
  --color-galactic-gossamer-950: #1c1f2d;
  --color-admiral-blue: #5a647f;
  --color-admiral-blue-50: #f1f5ff;
  --color-admiral-blue-100: #e2eafd;
  --color-admiral-blue-200: #cbd4ec;
  --color-admiral-blue-300: #b2bdd7;
  --color-admiral-blue-400: #919cb8;
  --color-admiral-blue-500: #757f9c;
  --color-admiral-blue-600: #5a647f;
  --color-admiral-blue-700: #464f66;
  --color-admiral-blue-800: #363d52;
  --color-admiral-blue-900: #292f40;
  --color-admiral-blue-950: #181d29;
}