Dark Eclipse to Napoleonic Blue color palette

122245Dark Eclipse 16226EMidnight Crest 001411Jedi Night 775191Ninja Princess 334072Napoleonic Blue

About this palette

Dark Eclipse to Napoleonic Blue is a 5-color dark, cool palette: #122245 (Dark Eclipse), #16226E (Midnight Crest), #001411 (Jedi Night), #775191 (Ninja Princess), #334072 (Napoleonic Blue). It mixes blue, black, purple tones and feels cool overall. The strongest text pairing is #001411 on #775191 with a contrast ratio of 3.04:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Dark Eclipse	rgb(18, 34, 69)	hsl(221, 59%, 17%)
Midnight Crest	rgb(22, 34, 110)	hsl(232, 67%, 26%)
Jedi Night	rgb(0, 20, 17)	hsl(171, 100%, 4%)
Ninja Princess	rgb(119, 81, 145)	hsl(276, 28%, 44%)
Napoleonic Blue	rgb(51, 64, 114)	hsl(228, 38%, 32%)

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.

Aa3.04:1 Poor#001411 on #775191
Aa3.04:1 Poor#775191 on #001411

Color blindness preview

CSS variables

/* Dark Eclipse to Napoleonic Blue — https://swatchly.xyz/palette/122245-16226e-001411-775191-334072 */
:root {
  --dark-eclipse: #122245;
  --midnight-crest: #16226e;
  --jedi-night: #001411;
  --ninja-princess: #775191;
  --napoleonic-blue: #334072;
}

Tailwind CSS v4

/* Dark Eclipse to Napoleonic Blue — https://swatchly.xyz/palette/122245-16226e-001411-775191-334072 */
@theme {
  --color-dark-eclipse: #122245;
  --color-dark-eclipse-50: #f0f5ff;
  --color-dark-eclipse-100: #e1ecff;
  --color-dark-eclipse-200: #c6d8fa;
  --color-dark-eclipse-300: #aec1e8;
  --color-dark-eclipse-400: #8ca2cc;
  --color-dark-eclipse-500: #7287b1;
  --color-dark-eclipse-600: #596d96;
  --color-dark-eclipse-700: #45587c;
  --color-dark-eclipse-800: #354566;
  --color-dark-eclipse-900: #293753;
  --color-dark-eclipse-950: #122245;
  --color-midnight-crest: #16226e;
  --color-midnight-crest-50: #f1f5ff;
  --color-midnight-crest-100: #e3ebff;
  --color-midnight-crest-200: #c8d7ff;
  --color-midnight-crest-300: #a8bfff;
  --color-midnight-crest-400: #819cef;
  --color-midnight-crest-500: #657fd3;
  --color-midnight-crest-600: #4c63b2;
  --color-midnight-crest-700: #384b93;
  --color-midnight-crest-800: #283875;
  --color-midnight-crest-900: #16226e;
  --color-midnight-crest-950: #0f183b;
  --color-jedi-night: #001411;
  --color-jedi-night-50: #eaf9f6;
  --color-jedi-night-100: #def0ec;
  --color-jedi-night-200: #c8ddd9;
  --color-jedi-night-300: #afc7c2;
  --color-jedi-night-400: #8ea8a3;
  --color-jedi-night-500: #6f8984;
  --color-jedi-night-600: #536b67;
  --color-jedi-night-700: #3c514d;
  --color-jedi-night-800: #293b38;
  --color-jedi-night-900: #1a2826;
  --color-jedi-night-950: #001411;
  --color-ninja-princess: #775191;
  --color-ninja-princess-50: #f9f2ff;
  --color-ninja-princess-100: #f2e2ff;
  --color-ninja-princess-200: #e5c6fd;
  --color-ninja-princess-300: #cfacea;
  --color-ninja-princess-400: #b089cc;
  --color-ninja-princess-500: #936caf;
  --color-ninja-princess-600: #775191;
  --color-ninja-princess-700: #5f3e76;
  --color-ninja-princess-800: #4c2f5f;
  --color-ninja-princess-900: #3b234c;
  --color-ninja-princess-950: #261431;
  --color-napoleonic-blue: #334072;
  --color-napoleonic-blue-50: #f1f5ff;
  --color-napoleonic-blue-100: #e4ebff;
  --color-napoleonic-blue-200: #c9d6ff;
  --color-napoleonic-blue-300: #afbff2;
  --color-napoleonic-blue-400: #8fa0d7;
  --color-napoleonic-blue-500: #7484bc;
  --color-napoleonic-blue-600: #5a6a9f;
  --color-napoleonic-blue-700: #465484;
  --color-napoleonic-blue-800: #334072;
  --color-napoleonic-blue-900: #283255;
  --color-napoleonic-blue-950: #171e38;
}