Black Knight to Blue-Collar color palette

000C13Black Knight 270F2DDark Prom Queen 3F0556Clairvoyant 482A3EWine Tasting 00538DDark Denim 006074Blue-Collar

Open in generator Export PNG, PDF, ASE…

About this palette

Black Knight to Blue-Collar is a 6-color dark, cool palette: #000C13 (Black Knight), #270F2D (Dark Prom Queen), #3F0556 (Clairvoyant), #482A3E (Wine Tasting), #00538D (Dark Denim), #006074 (Blue-Collar). It mixes black, purple, red, blue tones and feels cool overall. The strongest text pairing is #000C13 on #006074 with a contrast ratio of 2.75:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Knight	rgb(0, 12, 19)	hsl(202, 100%, 4%)
Dark Prom Queen	rgb(39, 15, 45)	hsl(288, 50%, 12%)
Clairvoyant	rgb(63, 5, 86)	hsl(283, 89%, 18%)
Wine Tasting	rgb(72, 42, 62)	hsl(320, 26%, 22%)
Dark Denim	rgb(0, 83, 141)	hsl(205, 100%, 28%)
Blue-Collar	rgb(0, 96, 116)	hsl(190, 100%, 23%)

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 Blue-Collar — https://swatchly.xyz/palette/000c13-270f2d-3f0556-482a3e-00538d-006074 */
:root {
  --black-knight: #000c13;
  --dark-prom-queen: #270f2d;
  --clairvoyant: #3f0556;
  --wine-tasting: #482a3e;
  --dark-denim: #00538d;
  --blue-collar: #006074;
}

Tailwind CSS v4

/* Black Knight to Blue-Collar — https://swatchly.xyz/palette/000c13-270f2d-3f0556-482a3e-00538d-006074 */
@theme {
  --color-black-knight: #000c13;
  --color-black-knight-50: #ebf7fd;
  --color-black-knight-100: #e0eef4;
  --color-black-knight-200: #cadbe2;
  --color-black-knight-300: #b2c4cd;
  --color-black-knight-400: #91a5af;
  --color-black-knight-500: #71858f;
  --color-black-knight-600: #53666f;
  --color-black-knight-700: #3b4b53;
  --color-black-knight-800: #27343a;
  --color-black-knight-900: #172125;
  --color-black-knight-950: #000c13;
  --color-dark-prom-queen: #270f2d;
  --color-dark-prom-queen-50: #fcf1ff;
  --color-dark-prom-queen-100: #f7e3fc;
  --color-dark-prom-queen-200: #e6ceec;
  --color-dark-prom-queen-300: #d1b6d8;
  --color-dark-prom-queen-400: #b396ba;
  --color-dark-prom-queen-500: #96799e;
  --color-dark-prom-queen-600: #7a5e81;
  --color-dark-prom-queen-700: #614867;
  --color-dark-prom-queen-800: #4b3650;
  --color-dark-prom-queen-900: #39273d;
  --color-dark-prom-queen-950: #270f2d;
  --color-clairvoyant: #3f0556;
  --color-clairvoyant-50: #faf1ff;
  --color-clairvoyant-100: #f5e4ff;
  --color-clairvoyant-200: #ebc8ff;
  --color-clairvoyant-300: #dbabf5;
  --color-clairvoyant-400: #bb87d8;
  --color-clairvoyant-500: #9e68ba;
  --color-clairvoyant-600: #804d9a;
  --color-clairvoyant-700: #65377c;
  --color-clairvoyant-800: #4d2660;
  --color-clairvoyant-900: #3f0556;
  --color-clairvoyant-950: #220d2d;
  --color-wine-tasting: #482a3e;
  --color-wine-tasting-50: #fff0f9;
  --color-wine-tasting-100: #fce3f2;
  --color-wine-tasting-200: #ebcee0;
  --color-wine-tasting-300: #d6b6ca;
  --color-wine-tasting-400: #b996ac;
  --color-wine-tasting-500: #9e7b91;
  --color-wine-tasting-600: #836177;
  --color-wine-tasting-700: #6b4c60;
  --color-wine-tasting-800: #563b4c;
  --color-wine-tasting-900: #482a3e;
  --color-wine-tasting-950: #2c1b26;
  --color-dark-denim: #00538d;
  --color-dark-denim-50: #eef6ff;
  --color-dark-denim-100: #dceeff;
  --color-dark-denim-200: #b7dbff;
  --color-dark-denim-300: #8ac5fe;
  --color-dark-denim-400: #63a4e2;
  --color-dark-denim-500: #4387c5;
  --color-dark-denim-600: #286ba6;
  --color-dark-denim-700: #00538d;
  --color-dark-denim-800: #04416e;
  --color-dark-denim-900: #003258;
  --color-dark-denim-950: #001e39;
  --color-blue-collar: #006074;
  --color-blue-collar-50: #e6f9ff;
  --color-blue-collar-100: #ccf3ff;
  --color-blue-collar-200: #abe2f3;
  --color-blue-collar-300: #8dccdf;
  --color-blue-collar-400: #66aec3;
  --color-blue-collar-500: #4692a7;
  --color-blue-collar-600: #2a778b;
  --color-blue-collar-700: #006074;
  --color-blue-collar-800: #004b5b;
  --color-blue-collar-900: #003a47;
  --color-blue-collar-950: #00242d;
}