Endless Galaxy to Hyper Blue Color Palette

About this palette

Endless Galaxy to Hyper Blue is a 5-color dark, cool, gradient palette: #050049 (Endless Galaxy), #31042B (Vienna Roast), #003956 (Poseidon), #59307E (Kingfisher Daisy), #165E9B (Hyper Blue). It mixes blue, purple tones and feels cool overall. The strongest text pairing is #050049 on #165E9B with a contrast ratio of 2.82:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Endless Galaxy	rgb(5, 0, 73)	hsl(244, 100%, 14%)
Vienna Roast	rgb(49, 4, 43)	hsl(308, 85%, 10%)
Poseidon	rgb(0, 57, 86)	hsl(200, 100%, 17%)
Kingfisher Daisy	rgb(89, 48, 126)	hsl(272, 45%, 34%)
Hyper Blue	rgb(22, 94, 155)	hsl(208, 75%, 35%)

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.

Color blindness preview

CSS variables

/* Endless Galaxy to Hyper Blue — https://swatchly.xyz/palette/050049-31042b-003956-59307e-165e9b */
:root {
  --endless-galaxy: #050049;
  --vienna-roast: #31042b;
  --poseidon: #003956;
  --kingfisher-daisy: #59307e;
  --hyper-blue: #165e9b;
}

Tailwind CSS v4

/* Endless Galaxy to Hyper Blue — https://swatchly.xyz/palette/050049-31042b-003956-59307e-165e9b */
@theme {
  --color-endless-galaxy: #050049;
  --color-endless-galaxy-50: #f1f5ff;
  --color-endless-galaxy-100: #e3ebff;
  --color-endless-galaxy-200: #c7d7ff;
  --color-endless-galaxy-300: #a7bfff;
  --color-endless-galaxy-400: #839eec;
  --color-endless-galaxy-500: #657fce;
  --color-endless-galaxy-600: #4a61ac;
  --color-endless-galaxy-700: #35498a;
  --color-endless-galaxy-800: #24346b;
  --color-endless-galaxy-900: #18244f;
  --color-endless-galaxy-950: #050049;
  --color-vienna-roast: #31042b;
  --color-vienna-roast-50: #fff0fb;
  --color-vienna-roast-100: #ffe1f8;
  --color-vienna-roast-200: #f3c8e9;
  --color-vienna-roast-300: #e0afd5;
  --color-vienna-roast-400: #c38eb7;
  --color-vienna-roast-500: #a6719b;
  --color-vienna-roast-600: #88567e;
  --color-vienna-roast-700: #6e4165;
  --color-vienna-roast-800: #562f4f;
  --color-vienna-roast-900: #42223c;
  --color-vienna-roast-950: #31042b;
  --color-poseidon: #003956;
  --color-poseidon-50: #ecf7ff;
  --color-poseidon-100: #d8efff;
  --color-poseidon-200: #b7ddf8;
  --color-poseidon-300: #9cc7e6;
  --color-poseidon-400: #78a9c9;
  --color-poseidon-500: #5c8daf;
  --color-poseidon-600: #427392;
  --color-poseidon-700: #2f5c79;
  --color-poseidon-800: #204862;
  --color-poseidon-900: #003956;
  --color-poseidon-950: #0a2333;
  --color-kingfisher-daisy: #59307e;
  --color-kingfisher-daisy-50: #f8f2ff;
  --color-kingfisher-daisy-100: #f1e6ff;
  --color-kingfisher-daisy-200: #e3ccff;
  --color-kingfisher-daisy-300: #d3b0fb;
  --color-kingfisher-daisy-400: #b68fe1;
  --color-kingfisher-daisy-500: #9c73c7;
  --color-kingfisher-daisy-600: #825aaa;
  --color-kingfisher-daisy-700: #6b458f;
  --color-kingfisher-daisy-800: #59307e;
  --color-kingfisher-daisy-900: #44265f;
  --color-kingfisher-daisy-950: #2c1640;
  --color-hyper-blue: #165e9b;
  --color-hyper-blue-50: #eef6ff;
  --color-hyper-blue-100: #ddedff;
  --color-hyper-blue-200: #bbddff;
  --color-hyper-blue-300: #93c9ff;
  --color-hyper-blue-400: #6aaae9;
  --color-hyper-blue-500: #4c8fcf;
  --color-hyper-blue-600: #3275b3;
  --color-hyper-blue-700: #165e9b;
  --color-hyper-blue-800: #0c497c;
  --color-hyper-blue-900: #023863;
  --color-hyper-blue-950: #002342;
}