Glossy Black to Dr Who Color Palette

About this palette

Glossy Black to Dr Who is a 5-color dark, warm, gradient palette: #0E0022 (Glossy Black), #300F00 (Shadow Play), #3E1947 (Velvet Cosmos), #89263B (Blood Oath), #765772 (Dr Who). It mixes purple, brown, red, pink tones and feels warm overall. The strongest text pairing is #0E0022 on #765772 with a contrast ratio of 3.24:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Glossy Black	rgb(14, 0, 34)	hsl(265, 100%, 7%)
Shadow Play	rgb(48, 15, 0)	hsl(19, 100%, 9%)
Velvet Cosmos	rgb(62, 25, 71)	hsl(288, 48%, 19%)
Blood Oath	rgb(137, 38, 59)	hsl(347, 57%, 34%)
Dr Who	rgb(118, 87, 114)	hsl(308, 15%, 40%)

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.24:1 Poor#0E0022 on #765772
Aa3.24:1 Poor#765772 on #0E0022

Color blindness preview

CSS variables

/* Glossy Black to Dr Who — https://swatchly.xyz/palette/0e0022-300f00-3e1947-89263b-765772 */
:root {
  --glossy-black: #0e0022;
  --shadow-play: #300f00;
  --velvet-cosmos: #3e1947;
  --blood-oath: #89263b;
  --dr-who: #765772;
}

Tailwind CSS v4

/* Glossy Black to Dr Who — https://swatchly.xyz/palette/0e0022-300f00-3e1947-89263b-765772 */
@theme {
  --color-glossy-black: #0e0022;
  --color-glossy-black-50: #f6f3ff;
  --color-glossy-black-100: #eee7ff;
  --color-glossy-black-200: #dcd0f8;
  --color-glossy-black-300: #c6b9e5;
  --color-glossy-black-400: #a798c8;
  --color-glossy-black-500: #8777a8;
  --color-glossy-black-600: #675985;
  --color-glossy-black-700: #4c3f65;
  --color-glossy-black-800: #342a48;
  --color-glossy-black-900: #21192f;
  --color-glossy-black-950: #0e0022;
  --color-shadow-play: #300f00;
  --color-shadow-play-50: #fff2ec;
  --color-shadow-play-100: #ffe5d9;
  --color-shadow-play-200: #f2cfbf;
  --color-shadow-play-300: #deb7a5;
  --color-shadow-play-400: #c19783;
  --color-shadow-play-500: #a47a66;
  --color-shadow-play-600: #875f4c;
  --color-shadow-play-700: #6c4938;
  --color-shadow-play-800: #553628;
  --color-shadow-play-900: #40281b;
  --color-shadow-play-950: #300f00;
  --color-velvet-cosmos: #3e1947;
  --color-velvet-cosmos-50: #fcf1ff;
  --color-velvet-cosmos-100: #f9e2ff;
  --color-velvet-cosmos-200: #ebcaf4;
  --color-velvet-cosmos-300: #d7b1e1;
  --color-velvet-cosmos-400: #b88fc2;
  --color-velvet-cosmos-500: #9b71a5;
  --color-velvet-cosmos-600: #7e5687;
  --color-velvet-cosmos-700: #63406c;
  --color-velvet-cosmos-800: #4c2f54;
  --color-velvet-cosmos-900: #3e1947;
  --color-velvet-cosmos-950: #231227;
  --color-blood-oath: #89263b;
  --color-blood-oath-50: #fff1f2;
  --color-blood-oath-100: #ffe3e5;
  --color-blood-oath-200: #ffc5ca;
  --color-blood-oath-300: #ff9faa;
  --color-blood-oath-400: #e27a88;
  --color-blood-oath-500: #c45c6c;
  --color-blood-oath-600: #a34152;
  --color-blood-oath-700: #89263b;
  --color-blood-oath-800: #6b1e2e;
  --color-blood-oath-900: #551422;
  --color-blood-oath-950: #380913;
  --color-dr-who: #765772;
  --color-dr-who-50: #fff0fd;
  --color-dr-who-100: #f8e1f5;
  --color-dr-who-200: #e6cae1;
  --color-dr-who-300: #cfb1cb;
  --color-dr-who-400: #b08fab;
  --color-dr-who-500: #93728e;
  --color-dr-who-600: #765772;
  --color-dr-who-700: #5f445b;
  --color-dr-who-800: #4b3448;
  --color-dr-who-900: #3b2738;
  --color-dr-who-950: #251724;
}