Black Knight to Grape Kiss color palette

000818Black Knight 39001FVienna Roast 55204FPurple Velour 00495BNocturnal Expedition 884772Grape Kiss

Open in generator Export PNG, PDF, ASE…

About this palette

Black Knight to Grape Kiss is a 5-color dark, warm palette: #000818 (Black Knight), #39001F (Vienna Roast), #55204F (Purple Velour), #00495B (Nocturnal Expedition), #884772 (Grape Kiss). It mixes black, red, purple, blue tones and feels warm overall. The strongest text pairing is #000818 on #884772 with a contrast ratio of 3.05:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Knight	rgb(0, 8, 24)	hsl(220, 100%, 5%)
Vienna Roast	rgb(57, 0, 31)	hsl(327, 100%, 11%)
Purple Velour	rgb(85, 32, 79)	hsl(307, 45%, 23%)
Nocturnal Expedition	rgb(0, 73, 91)	hsl(192, 100%, 18%)
Grape Kiss	rgb(136, 71, 114)	hsl(320, 31%, 41%)

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.05:1 Poor#000818 on #884772
Aa3.05:1 Poor#884772 on #000818

Color blindness preview

CSS variables

/* Black Knight to Grape Kiss — https://swatchly.xyz/palette/000818-39001f-55204f-00495b-884772 */
:root {
  --black-knight: #000818;
  --vienna-roast: #39001f;
  --purple-velour: #55204f;
  --nocturnal-expedition: #00495b;
  --grape-kiss: #884772;
}

Tailwind CSS v4

/* Black Knight to Grape Kiss — https://swatchly.xyz/palette/000818-39001f-55204f-00495b-884772 */
@theme {
  --color-black-knight: #000818;
  --color-black-knight-50: #eef6ff;
  --color-black-knight-100: #e0edfc;
  --color-black-knight-200: #cad9ec;
  --color-black-knight-300: #b1c3d8;
  --color-black-knight-400: #90a4ba;
  --color-black-knight-500: #708399;
  --color-black-knight-600: #526378;
  --color-black-knight-700: #39485a;
  --color-black-knight-800: #25313f;
  --color-black-knight-900: #161e28;
  --color-black-knight-950: #000818;
  --color-vienna-roast: #39001f;
  --color-vienna-roast-50: #fff1f6;
  --color-vienna-roast-100: #ffe2ed;
  --color-vienna-roast-200: #fdc5db;
  --color-vienna-roast-300: #ebacc5;
  --color-vienna-roast-400: #ce8aa6;
  --color-vienna-roast-500: #b16d8a;
  --color-vienna-roast-600: #93536e;
  --color-vienna-roast-700: #773e57;
  --color-vienna-roast-800: #5e2d43;
  --color-vienna-roast-900: #492032;
  --color-vienna-roast-950: #39001f;
  --color-purple-velour: #55204f;
  --color-purple-velour-50: #fff0fc;
  --color-purple-velour-100: #ffe0f9;
  --color-purple-velour-200: #f6c6ee;
  --color-purple-velour-300: #e3adda;
  --color-purple-velour-400: #c78cbe;
  --color-purple-velour-500: #ac71a3;
  --color-purple-velour-600: #915889;
  --color-purple-velour-700: #784471;
  --color-purple-velour-800: #62345c;
  --color-purple-velour-900: #55204f;
  --color-purple-velour-950: #341731;
  --color-nocturnal-expedition: #00495b;
  --color-nocturnal-expedition-50: #e7f9ff;
  --color-nocturnal-expedition-100: #cef2ff;
  --color-nocturnal-expedition-200: #b3e0f0;
  --color-nocturnal-expedition-300: #97cadc;
  --color-nocturnal-expedition-400: #71abbf;
  --color-nocturnal-expedition-500: #538fa3;
  --color-nocturnal-expedition-600: #397487;
  --color-nocturnal-expedition-700: #255c6d;
  --color-nocturnal-expedition-800: #00495b;
  --color-nocturnal-expedition-900: #0c3844;
  --color-nocturnal-expedition-950: #04232c;
  --color-grape-kiss: #884772;
  --color-grape-kiss-50: #fff0f9;
  --color-grape-kiss-100: #ffdef2;
  --color-grape-kiss-200: #f9bfe3;
  --color-grape-kiss-300: #e4a4cc;
  --color-grape-kiss-400: #c580ac;
  --color-grape-kiss-500: #a6638f;
  --color-grape-kiss-600: #884772;
  --color-grape-kiss-700: #6e365b;
  --color-grape-kiss-800: #582848;
  --color-grape-kiss-900: #461d39;
  --color-grape-kiss-950: #2d1024;
}