Plunged Into Darkness to Quiet Abyss Color Palette

About this palette

Plunged Into Darkness to Quiet Abyss is a 5-color dark, cool palette: #471950 (Plunged Into Darkness), #3F3C56 (Lava Stone), #6F5E74 (Plummy), #002632 (Midnight Dreams), #0F003B (Quiet Abyss). It mixes purple, blue tones and feels cool overall. The strongest text pairing is #6F5E74 on #0F003B with a contrast ratio of 3.26:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Plunged Into Darkness	rgb(71, 25, 80)	hsl(290, 52%, 21%)
Lava Stone	rgb(63, 60, 86)	hsl(247, 18%, 29%)
Plummy	rgb(111, 94, 116)	hsl(286, 10%, 41%)
Midnight Dreams	rgb(0, 38, 50)	hsl(194, 100%, 10%)
Quiet Abyss	rgb(15, 0, 59)	hsl(255, 100%, 12%)

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.26:1 Poor#6F5E74 on #0F003B
Aa3.26:1 Poor#0F003B on #6F5E74

Color blindness preview

CSS variables

/* Plunged Into Darkness to Quiet Abyss — https://swatchly.xyz/palette/471950-3f3c56-6f5e74-002632-0f003b */
:root {
  --plunged-into-darkness: #471950;
  --lava-stone: #3f3c56;
  --plummy: #6f5e74;
  --midnight-dreams: #002632;
  --quiet-abyss: #0f003b;
}

Tailwind CSS v4

/* Plunged Into Darkness to Quiet Abyss — https://swatchly.xyz/palette/471950-3f3c56-6f5e74-002632-0f003b */
@theme {
  --color-plunged-into-darkness: #471950;
  --color-plunged-into-darkness-50: #fdf0ff;
  --color-plunged-into-darkness-100: #fae1ff;
  --color-plunged-into-darkness-200: #f0c7f7;
  --color-plunged-into-darkness-300: #dcaee5;
  --color-plunged-into-darkness-400: #be8cc8;
  --color-plunged-into-darkness-500: #a26fac;
  --color-plunged-into-darkness-600: #85558f;
  --color-plunged-into-darkness-700: #6b4074;
  --color-plunged-into-darkness-800: #552f5c;
  --color-plunged-into-darkness-900: #471950;
  --color-plunged-into-darkness-950: #29132e;
  --color-lava-stone: #3f3c56;
  --color-lava-stone-50: #f4f4ff;
  --color-lava-stone-100: #eae9fd;
  --color-lava-stone-200: #d6d4ec;
  --color-lava-stone-300: #bfbdd8;
  --color-lava-stone-400: #9f9dba;
  --color-lava-stone-500: #84819e;
  --color-lava-stone-600: #696682;
  --color-lava-stone-700: #525068;
  --color-lava-stone-800: #3f3c56;
  --color-lava-stone-900: #302e40;
  --color-lava-stone-950: #1d1c29;
  --color-plummy: #6f5e74;
  --color-plummy-50: #fcf1ff;
  --color-plummy-100: #f1e5f5;
  --color-plummy-200: #decfe2;
  --color-plummy-300: #c7b6cc;
  --color-plummy-400: #a795ac;
  --color-plummy-500: #8b7990;
  --color-plummy-600: #6f5e74;
  --color-plummy-700: #584a5d;
  --color-plummy-800: #463949;
  --color-plummy-900: #362b39;
  --color-plummy-950: #221a24;
  --color-midnight-dreams: #002632;
  --color-midnight-dreams-50: #e8f8ff;
  --color-midnight-dreams-100: #d8f0fa;
  --color-midnight-dreams-200: #c0dde9;
  --color-midnight-dreams-300: #a6c7d4;
  --color-midnight-dreams-400: #84a8b7;
  --color-midnight-dreams-500: #688d9c;
  --color-midnight-dreams-600: #4f7381;
  --color-midnight-dreams-700: #3b5c69;
  --color-midnight-dreams-800: #2b4954;
  --color-midnight-dreams-900: #203942;
  --color-midnight-dreams-950: #002632;
  --color-quiet-abyss: #0f003b;
  --color-quiet-abyss-50: #f3f4ff;
  --color-quiet-abyss-100: #e8e9ff;
  --color-quiet-abyss-200: #d1d3ff;
  --color-quiet-abyss-300: #b8baf9;
  --color-quiet-abyss-400: #989ade;
  --color-quiet-abyss-500: #7a7abf;
  --color-quiet-abyss-600: #5d5d9d;
  --color-quiet-abyss-700: #45447d;
  --color-quiet-abyss-800: #32305f;
  --color-quiet-abyss-900: #212044;
  --color-quiet-abyss-950: #0f003b;
}