Dark Eclipse to Veil of Cinder Color Palette

About this palette

Dark Eclipse to Veil of Cinder is a 5-color dark, cool palette: #132248 (Dark Eclipse), #0F0044 (Silent Twilight), #62356A (Wineberry), #601845 (Soul Anchor), #7A4B4B (Veil of Cinder). It mixes blue, purple, red tones and feels cool overall. The strongest text pairing is #0F0044 on #7A4B4B with a contrast ratio of 2.66:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Dark Eclipse	rgb(19, 34, 72)	hsl(223, 58%, 18%)
Silent Twilight	rgb(15, 0, 68)	hsl(253, 100%, 13%)
Wineberry	rgb(98, 53, 106)	hsl(291, 33%, 31%)
Soul Anchor	rgb(96, 24, 69)	hsl(322, 60%, 24%)
Veil of Cinder	rgb(122, 75, 75)	hsl(0, 24%, 39%)

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

/* Dark Eclipse to Veil of Cinder — https://swatchly.xyz/palette/132248-0f0044-62356a-601845-7a4b4b */
:root {
  --dark-eclipse: #132248;
  --silent-twilight: #0f0044;
  --wineberry: #62356a;
  --soul-anchor: #601845;
  --veil-of-cinder: #7a4b4b;
}

Tailwind CSS v4

/* Dark Eclipse to Veil of Cinder — https://swatchly.xyz/palette/132248-0f0044-62356a-601845-7a4b4b */
@theme {
  --color-dark-eclipse: #132248;
  --color-dark-eclipse-50: #f1f5ff;
  --color-dark-eclipse-100: #e2ebff;
  --color-dark-eclipse-200: #c6d8fd;
  --color-dark-eclipse-300: #adc1eb;
  --color-dark-eclipse-400: #8ca1cf;
  --color-dark-eclipse-500: #7287b4;
  --color-dark-eclipse-600: #5a6d99;
  --color-dark-eclipse-700: #46577f;
  --color-dark-eclipse-800: #364569;
  --color-dark-eclipse-900: #293755;
  --color-dark-eclipse-950: #132248;
  --color-silent-twilight: #0f0044;
  --color-silent-twilight-50: #f3f4ff;
  --color-silent-twilight-100: #e6eaff;
  --color-silent-twilight-200: #ced4ff;
  --color-silent-twilight-300: #b3bbff;
  --color-silent-twilight-400: #929ae5;
  --color-silent-twilight-500: #757bc7;
  --color-silent-twilight-600: #5a5ea6;
  --color-silent-twilight-700: #434685;
  --color-silent-twilight-800: #303267;
  --color-silent-twilight-900: #21224c;
  --color-silent-twilight-950: #0f0044;
  --color-wineberry: #62356a;
  --color-wineberry-50: #fdf0ff;
  --color-wineberry-100: #fbe1ff;
  --color-wineberry-200: #efc8f6;
  --color-wineberry-300: #dcb1e4;
  --color-wineberry-400: #c090c9;
  --color-wineberry-500: #a676af;
  --color-wineberry-600: #8c5d94;
  --color-wineberry-700: #74487c;
  --color-wineberry-800: #62356a;
  --color-wineberry-900: #4b2a51;
  --color-wineberry-950: #311835;
  --color-soul-anchor: #601845;
  --color-soul-anchor-50: #fff0f8;
  --color-soul-anchor-100: #ffe2f0;
  --color-soul-anchor-200: #ffc3e2;
  --color-soul-anchor-300: #f0a7ce;
  --color-soul-anchor-400: #d586b1;
  --color-soul-anchor-500: #ba6b97;
  --color-soul-anchor-600: #9e527d;
  --color-soul-anchor-700: #843e66;
  --color-soul-anchor-800: #6d2e53;
  --color-soul-anchor-900: #601845;
  --color-soul-anchor-950: #3b132b;
  --color-veil-of-cinder: #7a4b4b;
  --color-veil-of-cinder-50: #fff1f1;
  --color-veil-of-cinder-100: #ffe4e3;
  --color-veil-of-cinder-200: #f6cdcc;
  --color-veil-of-cinder-300: #e4b5b4;
  --color-veil-of-cinder-400: #c89594;
  --color-veil-of-cinder-500: #ad7a7a;
  --color-veil-of-cinder-600: #916161;
  --color-veil-of-cinder-700: #7a4b4b;
  --color-veil-of-cinder-800: #603a3a;
  --color-veil-of-cinder-900: #4c2b2b;
  --color-veil-of-cinder-950: #311a1a;
}