Plummy to Black Knight Color Palette

About this palette

Plummy to Black Knight is a 5-color dark, cool palette: #6C5B7D (Plummy), #19213F (Dark Eclipse), #392774 (Explorer of the Galaxies), #503B6C (Meteorite), #000E0E (Black Knight). It mixes purple, blue, black tones and feels cool overall. The strongest text pairing is #6C5B7D on #000E0E with a contrast ratio of 3.21:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Plummy	rgb(108, 91, 125)	hsl(270, 16%, 42%)
Dark Eclipse	rgb(25, 33, 63)	hsl(227, 43%, 17%)
Explorer of the Galaxies	rgb(57, 39, 116)	hsl(254, 50%, 30%)
Meteorite	rgb(80, 59, 108)	hsl(266, 29%, 33%)
Black Knight	rgb(0, 14, 14)	hsl(180, 100%, 3%)

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.21:1 Poor#6C5B7D on #000E0E
Aa3.21:1 Poor#000E0E on #6C5B7D

Color blindness preview

CSS variables

/* Plummy to Black Knight — https://swatchly.xyz/palette/6c5b7d-19213f-392774-503b6c-000e0e */
:root {
  --plummy: #6c5b7d;
  --dark-eclipse: #19213f;
  --explorer-of-the-galaxies: #392774;
  --meteorite: #503b6c;
  --black-knight: #000e0e;
}

Tailwind CSS v4

/* Plummy to Black Knight — https://swatchly.xyz/palette/6c5b7d-19213f-392774-503b6c-000e0e */
@theme {
  --color-plummy: #6c5b7d;
  --color-plummy-50: #f8f2ff;
  --color-plummy-100: #f0e4fd;
  --color-plummy-200: #dccdeb;
  --color-plummy-300: #c5b4d6;
  --color-plummy-400: #a493b7;
  --color-plummy-500: #88769a;
  --color-plummy-600: #6c5b7d;
  --color-plummy-700: #564765;
  --color-plummy-800: #443750;
  --color-plummy-900: #352a3f;
  --color-plummy-950: #211928;
  --color-dark-eclipse: #19213f;
  --color-dark-eclipse-50: #f1f5ff;
  --color-dark-eclipse-100: #e4ebff;
  --color-dark-eclipse-200: #cdd7f5;
  --color-dark-eclipse-300: #b5c0e2;
  --color-dark-eclipse-400: #94a0c5;
  --color-dark-eclipse-500: #7a86aa;
  --color-dark-eclipse-600: #616c8f;
  --color-dark-eclipse-700: #4c5676;
  --color-dark-eclipse-800: #3b4460;
  --color-dark-eclipse-900: #2e354e;
  --color-dark-eclipse-950: #19213f;
  --color-explorer-of-the-galaxies: #392774;
  --color-explorer-of-the-galaxies-50: #f4f4ff;
  --color-explorer-of-the-galaxies-100: #eae8ff;
  --color-explorer-of-the-galaxies-200: #d5d2ff;
  --color-explorer-of-the-galaxies-300: #beb6ff;
  --color-explorer-of-the-galaxies-400: #a096e9;
  --color-explorer-of-the-galaxies-500: #867acf;
  --color-explorer-of-the-galaxies-600: #6d61b2;
  --color-explorer-of-the-galaxies-700: #584c97;
  --color-explorer-of-the-galaxies-800: #473b7d;
  --color-explorer-of-the-galaxies-900: #392774;
  --color-explorer-of-the-galaxies-950: #231b46;
  --color-meteorite: #503b6c;
  --color-meteorite-50: #f7f3ff;
  --color-meteorite-100: #efe6ff;
  --color-meteorite-200: #dfcefa;
  --color-meteorite-300: #cab7e8;
  --color-meteorite-400: #ad98cd;
  --color-meteorite-500: #927db3;
  --color-meteorite-600: #796397;
  --color-meteorite-700: #624e7e;
  --color-meteorite-800: #503b6c;
  --color-meteorite-900: #3d2e52;
  --color-meteorite-950: #271c36;
  --color-black-knight: #000e0e;
  --color-black-knight-50: #ebf8f8;
  --color-black-knight-100: #e0efee;
  --color-black-knight-200: #cadcdb;
  --color-black-knight-300: #b2c6c5;
  --color-black-knight-400: #91a7a6;
  --color-black-knight-500: #718786;
  --color-black-knight-600: #536867;
  --color-black-knight-700: #3b4d4c;
  --color-black-knight-800: #283635;
  --color-black-knight-900: #182222;
  --color-black-knight-950: #000e0e;
}