Beyond the Stars to Winter Wizard color palette

1E314FBeyond the Stars 005D76Blue-Collar 7E6EBDVenus Violet 6499E6Blue Bay 90E6FFWinter Wizard

About this palette

Beyond the Stars to Winter Wizard is a 5-color cool, gradient palette: #1E314F (Beyond the Stars), #005D76 (Blue-Collar), #7E6EBD (Venus Violet), #6499E6 (Blue Bay), #90E6FF (Winter Wizard). It mixes blue, purple tones and feels cool overall. The strongest text pairing is #1E314F on #90E6FF with a contrast ratio of 9.30:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Beyond the Stars	rgb(30, 49, 79)	hsl(217, 45%, 21%)
Blue-Collar	rgb(0, 93, 118)	hsl(193, 100%, 23%)
Venus Violet	rgb(126, 110, 189)	hsl(252, 37%, 59%)
Blue Bay	rgb(100, 153, 230)	hsl(216, 72%, 65%)
Winter Wizard	rgb(144, 230, 255)	hsl(194, 100%, 78%)

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.30:1 Very good#1E314F on #90E6FF
Aa9.30:1 Very good#90E6FF on #1E314F
Aa5.29:1 Good#005D76 on #90E6FF
Aa5.29:1 Good#90E6FF on #005D76
Aa4.50:1 Good#1E314F on #6499E6
Aa4.50:1 Good#6499E6 on #1E314F
Aa3.08:1 Poor#7E6EBD on #90E6FF
Aa3.08:1 Poor#90E6FF on #7E6EBD

Color blindness preview

CSS variables

/* Beyond the Stars to Winter Wizard — https://swatchly.xyz/palette/1e314f-005d76-7e6ebd-6499e6-90e6ff */
:root {
  --beyond-the-stars: #1e314f;
  --blue-collar: #005d76;
  --venus-violet: #7e6ebd;
  --blue-bay: #6499e6;
  --winter-wizard: #90e6ff;
}

Tailwind CSS v4

/* Beyond the Stars to Winter Wizard — https://swatchly.xyz/palette/1e314f-005d76-7e6ebd-6499e6-90e6ff */
@theme {
  --color-beyond-the-stars: #1e314f;
  --color-beyond-the-stars-50: #eff6ff;
  --color-beyond-the-stars-100: #e0ecff;
  --color-beyond-the-stars-200: #c6d9f5;
  --color-beyond-the-stars-300: #aec2e2;
  --color-beyond-the-stars-400: #8ca2c5;
  --color-beyond-the-stars-500: #7087aa;
  --color-beyond-the-stars-600: #566c8d;
  --color-beyond-the-stars-700: #425573;
  --color-beyond-the-stars-800: #31415b;
  --color-beyond-the-stars-900: #1e314f;
  --color-beyond-the-stars-950: #141e2e;
  --color-blue-collar: #005d76;
  --color-blue-collar-50: #e8f8ff;
  --color-blue-collar-100: #d0f2ff;
  --color-blue-collar-200: #abe1f6;
  --color-blue-collar-300: #8dcbe3;
  --color-blue-collar-400: #66acc6;
  --color-blue-collar-500: #4690ab;
  --color-blue-collar-600: #29748e;
  --color-blue-collar-700: #005d76;
  --color-blue-collar-800: #02495d;
  --color-blue-collar-900: #003848;
  --color-blue-collar-950: #00232e;
  --color-venus-violet: #7e6ebd;
  --color-venus-violet-50: #f3f1ff;
  --color-venus-violet-100: #e7e4ff;
  --color-venus-violet-200: #d2caff;
  --color-venus-violet-300: #bbaef8;
  --color-venus-violet-400: #9a8bdb;
  --color-venus-violet-500: #7e6ebd;
  --color-venus-violet-600: #6656a0;
  --color-venus-violet-700: #514285;
  --color-venus-violet-800: #40326c;
  --color-venus-violet-900: #322657;
  --color-venus-violet-950: #1f163a;
  --color-blue-bay: #6499e6;
  --color-blue-bay-50: #eaf2ff;
  --color-blue-bay-100: #d7e8ff;
  --color-blue-bay-200: #b5d3ff;
  --color-blue-bay-300: #8cbbff;
  --color-blue-bay-400: #6499e6;
  --color-blue-bay-500: #4b7fca;
  --color-blue-bay-600: #3465ac;
  --color-blue-bay-700: #235090;
  --color-blue-bay-800: #173e76;
  --color-blue-bay-900: #0e3060;
  --color-blue-bay-950: #061e41;
  --color-winter-wizard: #90e6ff;
  --color-winter-wizard-50: #e5f9ff;
  --color-winter-wizard-100: #cbf3ff;
  --color-winter-wizard-200: #90e6ff;
  --color-winter-wizard-300: #86cde2;
  --color-winter-wizard-400: #5daec5;
  --color-winter-wizard-500: #3b93aa;
  --color-winter-wizard-600: #19788e;
  --color-winter-wizard-700: #005f73;
  --color-winter-wizard-800: #004b5b;
  --color-winter-wizard-900: #003a46;
  --color-winter-wizard-950: #00242d;
}