Black Knight to Twilight Color Palette

About this palette

Black Knight to Twilight is a 4-color dark, cool, gradient palette: #000B0E (Black Knight), #28144B (Silent Orbit), #472D53 (Acai), #47539C (Twilight). It mixes black, purple, blue tones and feels cool overall. The strongest text pairing is #000B0E on #47539C with a contrast ratio of 2.83:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Knight	rgb(0, 11, 14)	hsl(193, 100%, 3%)
Silent Orbit	rgb(40, 20, 75)	hsl(262, 58%, 19%)
Acai	rgb(71, 45, 83)	hsl(281, 30%, 25%)
Twilight	rgb(71, 83, 156)	hsl(232, 37%, 45%)

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

/* Black Knight to Twilight — https://swatchly.xyz/palette/000b0e-28144b-472d53-47539c */
:root {
  --black-knight: #000b0e;
  --silent-orbit: #28144b;
  --acai: #472d53;
  --twilight: #47539c;
}

Tailwind CSS v4

/* Black Knight to Twilight — https://swatchly.xyz/palette/000b0e-28144b-472d53-47539c */
@theme {
  --color-black-knight: #000b0e;
  --color-black-knight-50: #ecf8fa;
  --color-black-knight-100: #e1eef1;
  --color-black-knight-200: #cbdbde;
  --color-black-knight-300: #b3c5c8;
  --color-black-knight-400: #92a6aa;
  --color-black-knight-500: #718589;
  --color-black-knight-600: #536669;
  --color-black-knight-700: #3b4a4e;
  --color-black-knight-800: #273336;
  --color-black-knight-900: #172021;
  --color-black-knight-950: #000b0e;
  --color-silent-orbit: #28144b;
  --color-silent-orbit-50: #f6f3ff;
  --color-silent-orbit-100: #ece7ff;
  --color-silent-orbit-200: #dacfff;
  --color-silent-orbit-300: #c5b7f1;
  --color-silent-orbit-400: #a696d5;
  --color-silent-orbit-500: #8b7bbb;
  --color-silent-orbit-600: #72619e;
  --color-silent-orbit-700: #5c4c84;
  --color-silent-orbit-800: #493b6c;
  --color-silent-orbit-900: #392d57;
  --color-silent-orbit-950: #28144b;
  --color-acai: #472d53;
  --color-acai-50: #faf1ff;
  --color-acai-100: #f6e3ff;
  --color-acai-200: #e5cef0;
  --color-acai-300: #d0b6dd;
  --color-acai-400: #b396c1;
  --color-acai-500: #997ca7;
  --color-acai-600: #7f638c;
  --color-acai-700: #684e74;
  --color-acai-800: #543e5f;
  --color-acai-900: #472d53;
  --color-acai-950: #2c1d33;
  --color-twilight: #47539c;
  --color-twilight-50: #f2f5ff;
  --color-twilight-100: #e5eaff;
  --color-twilight-200: #ccd7ff;
  --color-twilight-300: #b0bfff;
  --color-twilight-400: #8f9feb;
  --color-twilight-500: #7484d1;
  --color-twilight-600: #5c6ab4;
  --color-twilight-700: #47539c;
  --color-twilight-800: #36407d;
  --color-twilight-900: #293064;
  --color-twilight-950: #181d43;
}