Space Cadet to Calm Waters Color Palette

About this palette

Space Cadet to Calm Waters is a 5-color cool palette: #182954 (Space Cadet), #29527C (Slumber), #81C2FB (Nevermind Nirvana), #358FA6 (Blue Moon), #E4F8FF (Calm Waters). It mixes blue, white tones and feels cool overall. The strongest text pairing is #182954 on #E4F8FF with a contrast ratio of 12.92:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Space Cadet	rgb(24, 41, 84)	hsl(223, 56%, 21%)
Slumber	rgb(41, 82, 124)	hsl(210, 50%, 32%)
Nevermind Nirvana	rgb(129, 194, 251)	hsl(208, 94%, 75%)
Blue Moon	rgb(53, 143, 166)	hsl(192, 52%, 43%)
Calm Waters	rgb(228, 248, 255)	hsl(196, 100%, 95%)

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.

Aa12.92:1 Super#182954 on #E4F8FF
Aa12.92:1 Super#E4F8FF on #182954
Aa7.44:1 Very good#182954 on #81C2FB
Aa7.44:1 Very good#81C2FB on #182954
Aa7.40:1 Very good#29527C on #E4F8FF
Aa7.40:1 Very good#E4F8FF on #29527C
Aa4.26:1 Poor#29527C on #81C2FB
Aa4.26:1 Poor#81C2FB on #29527C

Color blindness preview

CSS variables

/* Space Cadet to Calm Waters — https://swatchly.xyz/palette/182954-29527c-81c2fb-358fa6-e4f8ff */
:root {
  --space-cadet: #182954;
  --slumber: #29527c;
  --nevermind-nirvana: #81c2fb;
  --blue-moon: #358fa6;
  --calm-waters: #e4f8ff;
}

Tailwind CSS v4

/* Space Cadet to Calm Waters — https://swatchly.xyz/palette/182954-29527c-81c2fb-358fa6-e4f8ff */
@theme {
  --color-space-cadet: #182954;
  --color-space-cadet-50: #f1f5ff;
  --color-space-cadet-100: #e2ebff;
  --color-space-cadet-200: #c5d8ff;
  --color-space-cadet-300: #abc1ef;
  --color-space-cadet-400: #89a0d2;
  --color-space-cadet-500: #6c83b5;
  --color-space-cadet-600: #526796;
  --color-space-cadet-700: #3d4f79;
  --color-space-cadet-800: #2c3b5f;
  --color-space-cadet-900: #182954;
  --color-space-cadet-950: #10192d;
  --color-slumber: #29527c;
  --color-slumber-50: #eef6ff;
  --color-slumber-100: #ddedff;
  --color-slumber-200: #b8daff;
  --color-slumber-300: #9cc3ed;
  --color-slumber-400: #78a2d0;
  --color-slumber-500: #5b86b3;
  --color-slumber-600: #426a94;
  --color-slumber-700: #29527c;
  --color-slumber-800: #204061;
  --color-slumber-900: #16314d;
  --color-slumber-950: #0b1e32;
  --color-nevermind-nirvana: #81c2fb;
  --color-nevermind-nirvana-50: #e8f4ff;
  --color-nevermind-nirvana-100: #d4eaff;
  --color-nevermind-nirvana-200: #add8ff;
  --color-nevermind-nirvana-300: #81c2fb;
  --color-nevermind-nirvana-400: #65a3d9;
  --color-nevermind-nirvana-500: #4888be;
  --color-nevermind-nirvana-600: #2f6ea1;
  --color-nevermind-nirvana-700: #1c5786;
  --color-nevermind-nirvana-800: #0e456d;
  --color-nevermind-nirvana-900: #053558;
  --color-nevermind-nirvana-950: #01213a;
  --color-blue-moon: #358fa6;
  --color-blue-moon-50: #e4f9ff;
  --color-blue-moon-100: #c7f2ff;
  --color-blue-moon-200: #a2e1f3;
  --color-blue-moon-300: #82cbe0;
  --color-blue-moon-400: #58abc2;
  --color-blue-moon-500: #358fa6;
  --color-blue-moon-600: #14748a;
  --color-blue-moon-700: #005d70;
  --color-blue-moon-800: #004958;
  --color-blue-moon-900: #003845;
  --color-blue-moon-950: #00232c;
  --color-calm-waters: #e4f8ff;
  --color-calm-waters-50: #e4f8ff;
  --color-calm-waters-100: #e0edf1;
  --color-calm-waters-200: #cbdadf;
  --color-calm-waters-300: #b3c4c9;
  --color-calm-waters-400: #93a5ab;
  --color-calm-waters-500: #778a90;
  --color-calm-waters-600: #5e6f75;
  --color-calm-waters-700: #49585e;
  --color-calm-waters-800: #37454a;
  --color-calm-waters-900: #293539;
  --color-calm-waters-950: #182124;
}