Kingfisher Daisy to Midnight Velvet color palette

503A83Kingfisher Daisy 545576Majestic Magic 001522Midnight Edition 003064Marine 2A1E40Midnight Velvet

Open in generator Export PNG, PDF, ASE…

About this palette

Kingfisher Daisy to Midnight Velvet is a 5-color dark, cool palette: #503A83 (Kingfisher Daisy), #545576 (Majestic Magic), #001522 (Midnight Edition), #003064 (Marine), #2A1E40 (Midnight Velvet). It mixes purple, black, blue tones and feels cool overall. The strongest text pairing is #545576 on #001522 with a contrast ratio of 2.60:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Kingfisher Daisy	rgb(80, 58, 131)	hsl(258, 39%, 37%)
Majestic Magic	rgb(84, 85, 118)	hsl(238, 17%, 40%)
Midnight Edition	rgb(0, 21, 34)	hsl(203, 100%, 7%)
Marine	rgb(0, 48, 100)	hsl(211, 100%, 20%)
Midnight Velvet	rgb(42, 30, 64)	hsl(261, 36%, 18%)

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

/* Kingfisher Daisy to Midnight Velvet — https://swatchly.xyz/palette/503a83-545576-001522-003064-2a1e40 */
:root {
  --kingfisher-daisy: #503a83;
  --majestic-magic: #545576;
  --midnight-edition: #001522;
  --marine: #003064;
  --midnight-velvet: #2a1e40;
}

Tailwind CSS v4

/* Kingfisher Daisy to Midnight Velvet — https://swatchly.xyz/palette/503a83-545576-001522-003064-2a1e40 */
@theme {
  --color-kingfisher-daisy: #503a83;
  --color-kingfisher-daisy-50: #f5f3ff;
  --color-kingfisher-daisy-100: #ece8ff;
  --color-kingfisher-daisy-200: #dad0ff;
  --color-kingfisher-daisy-300: #c6b6fd;
  --color-kingfisher-daisy-400: #a996e4;
  --color-kingfisher-daisy-500: #907bcb;
  --color-kingfisher-daisy-600: #7762af;
  --color-kingfisher-daisy-700: #614e94;
  --color-kingfisher-daisy-800: #503a83;
  --color-kingfisher-daisy-900: #3d2d64;
  --color-kingfisher-daisy-950: #271b43;
  --color-majestic-magic: #545576;
  --color-majestic-magic-50: #f3f4ff;
  --color-majestic-magic-100: #e8e9ff;
  --color-majestic-magic-200: #d4d5f2;
  --color-majestic-magic-300: #bdbfdf;
  --color-majestic-magic-400: #9ea0c3;
  --color-majestic-magic-500: #8385a8;
  --color-majestic-magic-600: #6a6b8d;
  --color-majestic-magic-700: #545576;
  --color-majestic-magic-800: #41425d;
  --color-majestic-magic-900: #323249;
  --color-majestic-magic-950: #1e1f2f;
  --color-midnight-edition: #001522;
  --color-midnight-edition-50: #ebf7ff;
  --color-midnight-edition-100: #dceefa;
  --color-midnight-edition-200: #c6dbe9;
  --color-midnight-edition-300: #adc5d4;
  --color-midnight-edition-400: #8ba6b7;
  --color-midnight-edition-500: #6d8899;
  --color-midnight-edition-600: #516a7a;
  --color-midnight-edition-700: #3b515f;
  --color-midnight-edition-800: #293c47;
  --color-midnight-edition-900: #1b2a33;
  --color-midnight-edition-950: #001522;
  --color-marine: #003064;
  --color-marine-50: #eff6ff;
  --color-marine-100: #dfedff;
  --color-marine-200: #bedaff;
  --color-marine-300: #9ac4fa;
  --color-marine-400: #76a4df;
  --color-marine-500: #5988c3;
  --color-marine-600: #406ca5;
  --color-marine-700: #2d5588;
  --color-marine-800: #1e426e;
  --color-marine-900: #003064;
  --color-marine-950: #091e39;
  --color-midnight-velvet: #2a1e40;
  --color-midnight-velvet-50: #f6f3ff;
  --color-midnight-velvet-100: #eee7ff;
  --color-midnight-velvet-200: #dbd1f3;
  --color-midnight-velvet-300: #c5bae0;
  --color-midnight-velvet-400: #a69ac3;
  --color-midnight-velvet-500: #8c80a9;
  --color-midnight-velvet-600: #73678e;
  --color-midnight-velvet-700: #5d5276;
  --color-midnight-velvet-800: #4b4161;
  --color-midnight-velvet-900: #3c334f;
  --color-midnight-velvet-950: #2a1e40;
}