Blue Bay to Space Cadet Color Palette

About this palette

Blue Bay to Space Cadet is a 4-color cool palette: #5A9ADE (Blue Bay), #B3EFFF (Pale Sky), #1E6971 (Persian Mosaic), #1E2A59 (Space Cadet). It mixes blue, turquoise tones and feels cool overall. The strongest text pairing is #B3EFFF on #1E2A59 with a contrast ratio of 10.92:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Blue Bay	rgb(90, 154, 222)	hsl(211, 67%, 61%)
Pale Sky	rgb(179, 239, 255)	hsl(193, 100%, 85%)
Persian Mosaic	rgb(30, 105, 113)	hsl(186, 58%, 28%)
Space Cadet	rgb(30, 42, 89)	hsl(228, 50%, 23%)

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.

Aa10.92:1 Very good#B3EFFF on #1E2A59
Aa10.92:1 Very good#1E2A59 on #B3EFFF
Aa5.04:1 Good#B3EFFF on #1E6971
Aa5.04:1 Good#1E6971 on #B3EFFF
Aa4.65:1 Good#5A9ADE on #1E2A59
Aa4.65:1 Good#1E2A59 on #5A9ADE

Color blindness preview

CSS variables

/* Blue Bay to Space Cadet — https://swatchly.xyz/palette/5a9ade-b3efff-1e6971-1e2a59 */
:root {
  --blue-bay: #5a9ade;
  --pale-sky: #b3efff;
  --persian-mosaic: #1e6971;
  --space-cadet: #1e2a59;
}

Tailwind CSS v4

/* Blue Bay to Space Cadet — https://swatchly.xyz/palette/5a9ade-b3efff-1e6971-1e2a59 */
@theme {
  --color-blue-bay: #5a9ade;
  --color-blue-bay-50: #e7f2ff;
  --color-blue-bay-100: #d3e7ff;
  --color-blue-bay-200: #acd3ff;
  --color-blue-bay-300: #82bcfa;
  --color-blue-bay-400: #5a9ade;
  --color-blue-bay-500: #4080c2;
  --color-blue-bay-600: #2967a5;
  --color-blue-bay-700: #17528a;
  --color-blue-bay-800: #0a4071;
  --color-blue-bay-900: #03325c;
  --color-blue-bay-950: #01203f;
  --color-pale-sky: #b3efff;
  --color-pale-sky-50: #d3f6ff;
  --color-pale-sky-100: #b3efff;
  --color-pale-sky-200: #addae6;
  --color-pale-sky-300: #93c6d3;
  --color-pale-sky-400: #70a8b7;
  --color-pale-sky-500: #548e9d;
  --color-pale-sky-600: #3c7482;
  --color-pale-sky-700: #295e6a;
  --color-pale-sky-800: #1a4955;
  --color-pale-sky-900: #0f3942;
  --color-pale-sky-950: #06232a;
  --color-persian-mosaic: #1e6971;
  --color-persian-mosaic-50: #dffcff;
  --color-persian-mosaic-100: #caf4fa;
  --color-persian-mosaic-200: #b1e4ea;
  --color-persian-mosaic-300: #96d0d7;
  --color-persian-mosaic-400: #71b3bb;
  --color-persian-mosaic-500: #5399a1;
  --color-persian-mosaic-600: #387f87;
  --color-persian-mosaic-700: #1e6971;
  --color-persian-mosaic-800: #125359;
  --color-persian-mosaic-900: #054046;
  --color-persian-mosaic-950: #00292d;
  --color-space-cadet: #1e2a59;
  --color-space-cadet-50: #f1f5ff;
  --color-space-cadet-100: #e3ebff;
  --color-space-cadet-200: #c8d6ff;
  --color-space-cadet-300: #aebff1;
  --color-space-cadet-400: #8c9fd5;
  --color-space-cadet-500: #7082b8;
  --color-space-cadet-600: #56679a;
  --color-space-cadet-700: #414f7d;
  --color-space-cadet-800: #303c64;
  --color-space-cadet-900: #1e2a59;
  --color-space-cadet-950: #131a31;
}