Black Knight to Starstruck Color Palette

About this palette

Black Knight to Starstruck is a 4-color dark, gradient palette: #000A10 (Black Knight), #002B35 (Black Box), #473C4D (Italian Grape), #43639E (Starstruck). It mixes black, blue, gray tones and feels cool overall. The strongest text pairing is #000A10 on #43639E with a contrast ratio of 3.35:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Knight	rgb(0, 10, 16)	hsl(202, 100%, 3%)
Black Box	rgb(0, 43, 53)	hsl(191, 100%, 10%)
Italian Grape	rgb(71, 60, 77)	hsl(279, 12%, 27%)
Starstruck	rgb(67, 99, 158)	hsl(219, 40%, 44%)

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.35:1 Poor#000A10 on #43639E
Aa3.35:1 Poor#43639E on #000A10

Color blindness preview

CSS variables

/* Black Knight to Starstruck — https://swatchly.xyz/palette/000a10-002b35-473c4d-43639e */
:root {
  --black-knight: #000a10;
  --black-box: #002b35;
  --italian-grape: #473c4d;
  --starstruck: #43639e;
}

Tailwind CSS v4

/* Black Knight to Starstruck — https://swatchly.xyz/palette/000a10-002b35-473c4d-43639e */
@theme {
  --color-black-knight: #000a10;
  --color-black-knight-50: #ecf7fc;
  --color-black-knight-100: #e1eef3;
  --color-black-knight-200: #cbdae1;
  --color-black-knight-300: #b3c4cc;
  --color-black-knight-400: #92a5ad;
  --color-black-knight-500: #71848d;
  --color-black-knight-600: #53656d;
  --color-black-knight-700: #3b4a50;
  --color-black-knight-800: #263238;
  --color-black-knight-900: #161f23;
  --color-black-knight-950: #000a10;
  --color-black-box: #002b35;
  --color-black-box-50: #e6f9ff;
  --color-black-box-100: #d6f1f8;
  --color-black-box-200: #bedee7;
  --color-black-box-300: #a4c8d3;
  --color-black-box-400: #82a9b5;
  --color-black-box-500: #678f9b;
  --color-black-box-600: #4e7581;
  --color-black-box-700: #3b5f6a;
  --color-black-box-800: #2c4d56;
  --color-black-box-900: #213d45;
  --color-black-box-950: #002b35;
  --color-italian-grape: #473c4d;
  --color-italian-grape-50: #f9f2fe;
  --color-italian-grape-100: #f0e8f5;
  --color-italian-grape-200: #ddd3e3;
  --color-italian-grape-300: #c7bccd;
  --color-italian-grape-400: #a89caf;
  --color-italian-grape-500: #8c8093;
  --color-italian-grape-600: #716678;
  --color-italian-grape-700: #5a4f60;
  --color-italian-grape-800: #473c4d;
  --color-italian-grape-900: #362e3a;
  --color-italian-grape-950: #211c24;
  --color-starstruck: #43639e;
  --color-starstruck-50: #f0f5ff;
  --color-starstruck-100: #dfeaff;
  --color-starstruck-200: #bed6ff;
  --color-starstruck-300: #9dbdf6;
  --color-starstruck-400: #7a9cda;
  --color-starstruck-500: #5d7fbc;
  --color-starstruck-600: #43639e;
  --color-starstruck-700: #324e81;
  --color-starstruck-800: #253c69;
  --color-starstruck-900: #1a2e54;
  --color-starstruck-950: #0e1c37;
}