Interstellar Blue to Kingfisher Daisy color palette

050F5CInterstellar Blue 142241Dark Eclipse 48374FCall It a Night 624D6AYour Majesty 0D042DMysterious Depths 5D2D7BKingfisher Daisy

Open in generator Export PNG, PDF, ASE…

About this palette

Interstellar Blue to Kingfisher Daisy is a 6-color dark, cool palette: #050F5C (Interstellar Blue), #142241 (Dark Eclipse), #48374F (Call It a Night), #624D6A (Your Majesty), #0D042D (Mysterious Depths), #5D2D7B (Kingfisher Daisy). It mixes blue, purple tones and feels cool overall. The strongest text pairing is #624D6A on #0D042D with a contrast ratio of 2.60:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Interstellar Blue	rgb(5, 15, 92)	hsl(233, 90%, 19%)
Dark Eclipse	rgb(20, 34, 65)	hsl(221, 53%, 17%)
Call It a Night	rgb(72, 55, 79)	hsl(282, 18%, 26%)
Your Majesty	rgb(98, 77, 106)	hsl(283, 16%, 36%)
Mysterious Depths	rgb(13, 4, 45)	hsl(253, 84%, 10%)
Kingfisher Daisy	rgb(93, 45, 123)	hsl(277, 46%, 33%)

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

/* Interstellar Blue to Kingfisher Daisy — https://swatchly.xyz/palette/050f5c-142241-48374f-624d6a-0d042d-5d2d7b */
:root {
  --interstellar-blue: #050f5c;
  --dark-eclipse: #142241;
  --call-it-a-night: #48374f;
  --your-majesty: #624d6a;
  --mysterious-depths: #0d042d;
  --kingfisher-daisy: #5d2d7b;
}

Tailwind CSS v4

/* Interstellar Blue to Kingfisher Daisy — https://swatchly.xyz/palette/050f5c-142241-48374f-624d6a-0d042d-5d2d7b */
@theme {
  --color-interstellar-blue: #050f5c;
  --color-interstellar-blue-50: #f1f5ff;
  --color-interstellar-blue-100: #e2ebff;
  --color-interstellar-blue-200: #c6d7ff;
  --color-interstellar-blue-300: #a5c0ff;
  --color-interstellar-blue-400: #7d9ef1;
  --color-interstellar-blue-500: #6182d6;
  --color-interstellar-blue-600: #4867b7;
  --color-interstellar-blue-700: #355099;
  --color-interstellar-blue-800: #263d7c;
  --color-interstellar-blue-900: #1b2e64;
  --color-interstellar-blue-950: #050f5c;
  --color-dark-eclipse: #142241;
  --color-dark-eclipse-50: #f0f5ff;
  --color-dark-eclipse-100: #e2ebff;
  --color-dark-eclipse-200: #c8d8f7;
  --color-dark-eclipse-300: #b0c1e4;
  --color-dark-eclipse-400: #8fa2c7;
  --color-dark-eclipse-500: #7487ad;
  --color-dark-eclipse-600: #5c6d91;
  --color-dark-eclipse-700: #475778;
  --color-dark-eclipse-800: #374562;
  --color-dark-eclipse-900: #2a364f;
  --color-dark-eclipse-950: #142241;
  --color-call-it-a-night: #48374f;
  --color-call-it-a-night-50: #fbf1ff;
  --color-call-it-a-night-100: #f3e6f8;
  --color-call-it-a-night-200: #e0d1e7;
  --color-call-it-a-night-300: #cab9d2;
  --color-call-it-a-night-400: #ab98b3;
  --color-call-it-a-night-500: #8f7c97;
  --color-call-it-a-night-600: #73617b;
  --color-call-it-a-night-700: #5b4b62;
  --color-call-it-a-night-800: #48374f;
  --color-call-it-a-night-900: #362b3b;
  --color-call-it-a-night-950: #221925;
  --color-your-majesty: #624d6a;
  --color-your-majesty-50: #fbf1ff;
  --color-your-majesty-100: #f4e5fa;
  --color-your-majesty-200: #e2d0e9;
  --color-your-majesty-300: #cdb9d5;
  --color-your-majesty-400: #af99b8;
  --color-your-majesty-500: #947d9c;
  --color-your-majesty-600: #796381;
  --color-your-majesty-700: #624d6a;
  --color-your-majesty-800: #4d3c53;
  --color-your-majesty-900: #3b2d41;
  --color-your-majesty-950: #251b29;
  --color-mysterious-depths: #0d042d;
  --color-mysterious-depths-50: #f4f4ff;
  --color-mysterious-depths-100: #e9e9ff;
  --color-mysterious-depths-200: #d3d3fd;
  --color-mysterious-depths-300: #bcbceb;
  --color-mysterious-depths-400: #9c9bcf;
  --color-mysterious-depths-500: #7d7cb0;
  --color-mysterious-depths-600: #605e8e;
  --color-mysterious-depths-700: #47456f;
  --color-mysterious-depths-800: #323052;
  --color-mysterious-depths-900: #211f39;
  --color-mysterious-depths-950: #0d042d;
  --color-kingfisher-daisy: #5d2d7b;
  --color-kingfisher-daisy-50: #f9f2ff;
  --color-kingfisher-daisy-100: #f3e5ff;
  --color-kingfisher-daisy-200: #e8caff;
  --color-kingfisher-daisy-300: #d8aef8;
  --color-kingfisher-daisy-400: #bc8cde;
  --color-kingfisher-daisy-500: #a171c4;
  --color-kingfisher-daisy-600: #8757a7;
  --color-kingfisher-daisy-700: #6f428d;
  --color-kingfisher-daisy-800: #5d2d7b;
  --color-kingfisher-daisy-900: #47245d;
  --color-kingfisher-daisy-950: #2e143e;
}