Sea of Stars to Innocent Snowdrop Color Palette

About this palette

Sea of Stars to Innocent Snowdrop is a 4-color cool, gradient palette: #003650 (Sea of Stars), #8552AD (Royal Lavender), #00AEF9 (Cerulean), #BFC6FF (Innocent Snowdrop). It mixes blue, purple tones and feels cool overall. The strongest text pairing is #003650 on #BFC6FF with a contrast ratio of 7.75:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sea of Stars	rgb(0, 54, 80)	hsl(200, 100%, 16%)
Royal Lavender	rgb(133, 82, 173)	hsl(274, 36%, 50%)
Cerulean	rgb(0, 174, 249)	hsl(198, 100%, 49%)
Innocent Snowdrop	rgb(191, 198, 255)	hsl(233, 100%, 87%)

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.

Aa7.75:1 Very good#003650 on #BFC6FF
Aa7.75:1 Very good#BFC6FF on #003650
Aa5.12:1 Good#003650 on #00AEF9
Aa5.12:1 Good#00AEF9 on #003650
Aa3.35:1 Poor#8552AD on #BFC6FF
Aa3.35:1 Poor#BFC6FF on #8552AD

Color blindness preview

CSS variables

/* Sea of Stars to Innocent Snowdrop — https://swatchly.xyz/palette/003650-8552ad-00aef9-bfc6ff */
:root {
  --sea-of-stars: #003650;
  --royal-lavender: #8552ad;
  --cerulean: #00aef9;
  --innocent-snowdrop: #bfc6ff;
}

Tailwind CSS v4

/* Sea of Stars to Innocent Snowdrop — https://swatchly.xyz/palette/003650-8552ad-00aef9-bfc6ff */
@theme {
  --color-sea-of-stars: #003650;
  --color-sea-of-stars-50: #ebf7ff;
  --color-sea-of-stars-100: #d7efff;
  --color-sea-of-stars-200: #b9ddf5;
  --color-sea-of-stars-300: #9dc7e3;
  --color-sea-of-stars-400: #7aa8c6;
  --color-sea-of-stars-500: #5d8caa;
  --color-sea-of-stars-600: #43718e;
  --color-sea-of-stars-700: #2f5a73;
  --color-sea-of-stars-800: #20465c;
  --color-sea-of-stars-900: #003650;
  --color-sea-of-stars-950: #0a212e;
  --color-royal-lavender: #8552ad;
  --color-royal-lavender-50: #f8f2ff;
  --color-royal-lavender-100: #f2e5ff;
  --color-royal-lavender-200: #e6cbff;
  --color-royal-lavender-300: #d8acff;
  --color-royal-lavender-400: #bb89e5;
  --color-royal-lavender-500: #a06dca;
  --color-royal-lavender-600: #8552ad;
  --color-royal-lavender-700: #6c3d8f;
  --color-royal-lavender-800: #562c74;
  --color-royal-lavender-900: #431f5d;
  --color-royal-lavender-950: #2b113d;
  --color-cerulean: #00aef9;
  --color-cerulean-50: #ecf7ff;
  --color-cerulean-100: #d9efff;
  --color-cerulean-200: #b0dfff;
  --color-cerulean-300: #7cccff;
  --color-cerulean-400: #00aef9;
  --color-cerulean-500: #0091d0;
  --color-cerulean-600: #0074a8;
  --color-cerulean-700: #005c87;
  --color-cerulean-800: #00486a;
  --color-cerulean-900: #003753;
  --color-cerulean-950: #002236;
  --color-innocent-snowdrop: #bfc6ff;
  --color-innocent-snowdrop-50: #f9faff;
  --color-innocent-snowdrop-100: #eff1ff;
  --color-innocent-snowdrop-200: #d9ddff;
  --color-innocent-snowdrop-300: #bfc6ff;
  --color-innocent-snowdrop-400: #9fa5d9;
  --color-innocent-snowdrop-500: #8287bc;
  --color-innocent-snowdrop-600: #666b9e;
  --color-innocent-snowdrop-700: #4f5381;
  --color-innocent-snowdrop-800: #3c3f67;
  --color-innocent-snowdrop-900: #2d2f51;
  --color-innocent-snowdrop-950: #1b1d35;
}