Juvie to Outer Space Color Palette

About this palette

Juvie to Outer Space is a 5-color muted, cool palette: #96B6CC (Juvie), #20303B (Blue Whale), #548EC0 (Sea Salt Rivers), #DAEEFF (Cloudless), #354F61 (Outer Space). It mixes blue, gray, white tones and feels cool overall. The strongest text pairing is #20303B on #DAEEFF with a contrast ratio of 11.41:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Juvie	rgb(150, 182, 204)	hsl(204, 35%, 69%)
Blue Whale	rgb(32, 48, 59)	hsl(204, 30%, 18%)
Sea Salt Rivers	rgb(84, 142, 192)	hsl(208, 46%, 54%)
Cloudless	rgb(218, 238, 255)	hsl(208, 100%, 93%)
Outer Space	rgb(53, 79, 97)	hsl(205, 29%, 29%)

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.41:1 Very good#20303B on #DAEEFF
Aa11.41:1 Very good#DAEEFF on #20303B
Aa7.23:1 Very good#DAEEFF on #354F61
Aa7.23:1 Very good#354F61 on #DAEEFF
Aa6.37:1 Good#96B6CC on #20303B
Aa6.37:1 Good#20303B on #96B6CC
Aa4.04:1 Poor#96B6CC on #354F61
Aa4.04:1 Poor#354F61 on #96B6CC

Color blindness preview

CSS variables

/* Juvie to Outer Space — https://swatchly.xyz/palette/96b6cc-20303b-548ec0-daeeff-354f61 */
:root {
  --juvie: #96b6cc;
  --blue-whale: #20303b;
  --sea-salt-rivers: #548ec0;
  --cloudless: #daeeff;
  --outer-space: #354f61;
}

Tailwind CSS v4

/* Juvie to Outer Space — https://swatchly.xyz/palette/96b6cc-20303b-548ec0-daeeff-354f61 */
@theme {
  --color-juvie: #96b6cc;
  --color-juvie-50: #f6fbff;
  --color-juvie-100: #e8f6ff;
  --color-juvie-200: #d0e6f6;
  --color-juvie-300: #b9d2e4;
  --color-juvie-400: #96b6cc;
  --color-juvie-500: #7997ac;
  --color-juvie-600: #5c7a8e;
  --color-juvie-700: #446073;
  --color-juvie-800: #324a5a;
  --color-juvie-900: #233845;
  --color-juvie-950: #13212b;
  --color-blue-whale: #20303b;
  --color-blue-whale-50: #ecf7ff;
  --color-blue-whale-100: #e1edf6;
  --color-blue-whale-200: #cbdae4;
  --color-blue-whale-300: #b3c4d0;
  --color-blue-whale-400: #91a3b0;
  --color-blue-whale-500: #758794;
  --color-blue-whale-600: #5a6c78;
  --color-blue-whale-700: #44545f;
  --color-blue-whale-800: #334049;
  --color-blue-whale-900: #20303b;
  --color-blue-whale-950: #151c22;
  --color-sea-salt-rivers: #548ec0;
  --color-sea-salt-rivers-50: #eef7ff;
  --color-sea-salt-rivers-100: #ddefff;
  --color-sea-salt-rivers-200: #b9deff;
  --color-sea-salt-rivers-300: #97c8f5;
  --color-sea-salt-rivers-400: #72a9db;
  --color-sea-salt-rivers-500: #548ec0;
  --color-sea-salt-rivers-600: #3a72a2;
  --color-sea-salt-rivers-700: #255b86;
  --color-sea-salt-rivers-800: #16476c;
  --color-sea-salt-rivers-900: #0c3656;
  --color-sea-salt-rivers-950: #042138;
  --color-cloudless: #daeeff;
  --color-cloudless-50: #edf6ff;
  --color-cloudless-100: #daeeff;
  --color-cloudless-200: #cbd9e6;
  --color-cloudless-300: #b3c3d1;
  --color-cloudless-400: #92a4b3;
  --color-cloudless-500: #778998;
  --color-cloudless-600: #5d6e7d;
  --color-cloudless-700: #485764;
  --color-cloudless-800: #374450;
  --color-cloudless-900: #29343e;
  --color-cloudless-950: #182027;
  --color-outer-space: #354f61;
  --color-outer-space-50: #ecf7ff;
  --color-outer-space-100: #dceefc;
  --color-outer-space-200: #c5dbeb;
  --color-outer-space-300: #aec7d9;
  --color-outer-space-400: #8ea9bd;
  --color-outer-space-500: #748fa3;
  --color-outer-space-600: #5b7689;
  --color-outer-space-700: #486172;
  --color-outer-space-800: #354f61;
  --color-outer-space-900: #293d4a;
  --color-outer-space-950: #182731;
}