Beyond the Stars to Droplet Color Palette

About this palette

Beyond the Stars to Droplet is a 4-color cool, monochromatic, gradient palette: #003458 (Beyond the Stars), #0075B3 (Brilliant Blue), #00A1F3 (Fresh Blue of Bel Air), #B2DEFF (Droplet). It mixes blue tones and feels cool overall. The strongest text pairing is #003458 on #B2DEFF with a contrast ratio of 9.06:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Beyond the Stars	rgb(0, 52, 88)	hsl(205, 100%, 17%)
Brilliant Blue	rgb(0, 117, 179)	hsl(201, 100%, 35%)
Fresh Blue of Bel Air	rgb(0, 161, 243)	hsl(200, 100%, 48%)
Droplet	rgb(178, 222, 255)	hsl(206, 100%, 85%)

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.06:1 Very good#003458 on #B2DEFF
Aa9.06:1 Very good#B2DEFF on #003458
Aa4.53:1 Good#003458 on #00A1F3
Aa4.53:1 Good#00A1F3 on #003458
Aa3.52:1 Poor#0075B3 on #B2DEFF
Aa3.52:1 Poor#B2DEFF on #0075B3

Color blindness preview

CSS variables

/* Beyond the Stars to Droplet — https://swatchly.xyz/palette/003458-0075b3-00a1f3-b2deff */
:root {
  --beyond-the-stars: #003458;
  --brilliant-blue: #0075b3;
  --fresh-blue-of-bel-air: #00a1f3;
  --droplet: #b2deff;
}

Tailwind CSS v4

/* Beyond the Stars to Droplet — https://swatchly.xyz/palette/003458-0075b3-00a1f3-b2deff */
@theme {
  --color-beyond-the-stars: #003458;
  --color-beyond-the-stars-50: #edf6ff;
  --color-beyond-the-stars-100: #dbeeff;
  --color-beyond-the-stars-200: #b8dcfe;
  --color-beyond-the-stars-300: #9cc6ec;
  --color-beyond-the-stars-400: #78a6d0;
  --color-beyond-the-stars-500: #5c8bb4;
  --color-beyond-the-stars-600: #426f97;
  --color-beyond-the-stars-700: #2e587c;
  --color-beyond-the-stars-800: #1f4463;
  --color-beyond-the-stars-900: #003458;
  --color-beyond-the-stars-950: #092033;
  --color-brilliant-blue: #0075b3;
  --color-brilliant-blue-50: #edf7ff;
  --color-brilliant-blue-100: #dbefff;
  --color-brilliant-blue-200: #b5deff;
  --color-brilliant-blue-300: #86cbff;
  --color-brilliant-blue-400: #55acea;
  --color-brilliant-blue-500: #3190d0;
  --color-brilliant-blue-600: #0075b3;
  --color-brilliant-blue-700: #005d8f;
  --color-brilliant-blue-800: #004871;
  --color-brilliant-blue-900: #003758;
  --color-brilliant-blue-950: #002239;
  --color-fresh-blue-of-bel-air: #00a1f3;
  --color-fresh-blue-of-bel-air-50: #e6f4ff;
  --color-fresh-blue-of-bel-air-100: #d0eaff;
  --color-fresh-blue-of-bel-air-200: #a6d8ff;
  --color-fresh-blue-of-bel-air-300: #6fc2ff;
  --color-fresh-blue-of-bel-air-400: #00a1f3;
  --color-fresh-blue-of-bel-air-500: #0086cc;
  --color-fresh-blue-of-bel-air-600: #006ca5;
  --color-fresh-blue-of-bel-air-700: #005685;
  --color-fresh-blue-of-bel-air-800: #00446a;
  --color-fresh-blue-of-bel-air-900: #003554;
  --color-fresh-blue-of-bel-air-950: #002238;
  --color-droplet: #b2deff;
  --color-droplet-50: #ecf7ff;
  --color-droplet-100: #d9efff;
  --color-droplet-200: #b2deff;
  --color-droplet-300: #a2c6e2;
  --color-droplet-400: #7fa7c5;
  --color-droplet-500: #628caa;
  --color-droplet-600: #49718e;
  --color-droplet-700: #355a74;
  --color-droplet-800: #26465d;
  --color-droplet-900: #1a3649;
  --color-droplet-950: #0d212f;
}