Plunged Into Darkness to Storm Is Coming Color Palette

About this palette

Plunged Into Darkness to Storm Is Coming is a 5-color dark, cool palette: #4B194D (Plunged Into Darkness), #0C2728 (Sunken Ship), #090D26 (Void), #5C5B72 (Smoky), #3F3E64 (Storm Is Coming). It mixes purple, gray, black tones and feels cool overall. The strongest text pairing is #090D26 on #5C5B72 with a contrast ratio of 2.91:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Plunged Into Darkness	rgb(75, 25, 77)	hsl(298, 51%, 20%)
Sunken Ship	rgb(12, 39, 40)	hsl(182, 54%, 10%)
Void	rgb(9, 13, 38)	hsl(232, 62%, 9%)
Smoky	rgb(92, 91, 114)	hsl(243, 11%, 40%)
Storm Is Coming	rgb(63, 62, 100)	hsl(242, 23%, 32%)

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

/* Plunged Into Darkness to Storm Is Coming — https://swatchly.xyz/palette/4b194d-0c2728-090d26-5c5b72-3f3e64 */
:root {
  --plunged-into-darkness: #4b194d;
  --sunken-ship: #0c2728;
  --void: #090d26;
  --smoky: #5c5b72;
  --storm-is-coming: #3f3e64;
}

Tailwind CSS v4

/* Plunged Into Darkness to Storm Is Coming — https://swatchly.xyz/palette/4b194d-0c2728-090d26-5c5b72-3f3e64 */
@theme {
  --color-plunged-into-darkness: #4b194d;
  --color-plunged-into-darkness-50: #ffefff;
  --color-plunged-into-darkness-100: #ffdfff;
  --color-plunged-into-darkness-200: #f3c6f3;
  --color-plunged-into-darkness-300: #e0ade0;
  --color-plunged-into-darkness-400: #c28bc3;
  --color-plunged-into-darkness-500: #a66fa7;
  --color-plunged-into-darkness-600: #89558b;
  --color-plunged-into-darkness-700: #6f4071;
  --color-plunged-into-darkness-800: #582f5a;
  --color-plunged-into-darkness-900: #4b194d;
  --color-plunged-into-darkness-950: #2c132d;
  --color-sunken-ship: #0c2728;
  --color-sunken-ship-50: #e8f9f9;
  --color-sunken-ship-100: #ddf0f0;
  --color-sunken-ship-200: #c6dddd;
  --color-sunken-ship-300: #adc7c7;
  --color-sunken-ship-400: #8ca8a9;
  --color-sunken-ship-500: #708d8e;
  --color-sunken-ship-600: #577374;
  --color-sunken-ship-700: #435c5d;
  --color-sunken-ship-800: #33494a;
  --color-sunken-ship-900: #263a3a;
  --color-sunken-ship-950: #0c2728;
  --color-void: #090d26;
  --color-void-50: #f2f5ff;
  --color-void-100: #e4eaff;
  --color-void-200: #cfd6f1;
  --color-void-300: #b7c0de;
  --color-void-400: #97a0c1;
  --color-void-500: #7881a2;
  --color-void-600: #5c6483;
  --color-void-700: #444b65;
  --color-void-800: #30354b;
  --color-void-900: #202435;
  --color-void-950: #090d26;
  --color-smoky: #5c5b72;
  --color-smoky-50: #f4f4ff;
  --color-smoky-100: #eae9fa;
  --color-smoky-200: #d7d7eb;
  --color-smoky-300: #c2c2d8;
  --color-smoky-400: #a4a3bc;
  --color-smoky-500: #8a89a2;
  --color-smoky-600: #717088;
  --color-smoky-700: #5c5b72;
  --color-smoky-800: #48475a;
  --color-smoky-900: #373646;
  --color-smoky-950: #22212d;
  --color-storm-is-coming: #3f3e64;
  --color-storm-is-coming-50: #f4f4ff;
  --color-storm-is-coming-100: #e8e9ff;
  --color-storm-is-coming-200: #d3d4f7;
  --color-storm-is-coming-300: #bcbde4;
  --color-storm-is-coming-400: #9d9dc7;
  --color-storm-is-coming-500: #8182ac;
  --color-storm-is-coming-600: #686790;
  --color-storm-is-coming-700: #525176;
  --color-storm-is-coming-800: #3f3e64;
  --color-storm-is-coming-900: #30304b;
  --color-storm-is-coming-950: #1e1d31;
}