Obsidian Shard to Prunella Color Palette

About this palette

Obsidian Shard to Prunella is a 5-color dark, cool, gradient palette: #080514 (Obsidian Shard), #250B3B (Midnight Monarch), #3E1C58 (Plunged Into Darkness), #31487E (Nautical), #854A92 (Prunella). It mixes black, purple, blue tones and feels cool overall. The strongest text pairing is #080514 on #854A92 with a contrast ratio of 3.25:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Obsidian Shard	rgb(8, 5, 20)	hsl(252, 60%, 5%)
Midnight Monarch	rgb(37, 11, 59)	hsl(272, 69%, 14%)
Plunged Into Darkness	rgb(62, 28, 88)	hsl(274, 52%, 23%)
Nautical	rgb(49, 72, 126)	hsl(222, 44%, 34%)
Prunella	rgb(133, 74, 146)	hsl(289, 33%, 43%)

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.25:1 Poor#080514 on #854A92
Aa3.25:1 Poor#854A92 on #080514

Color blindness preview

CSS variables

/* Obsidian Shard to Prunella — https://swatchly.xyz/palette/080514-250b3b-3e1c58-31487e-854a92 */
:root {
  --obsidian-shard: #080514;
  --midnight-monarch: #250b3b;
  --plunged-into-darkness: #3e1c58;
  --nautical: #31487e;
  --prunella: #854a92;
}

Tailwind CSS v4

/* Obsidian Shard to Prunella — https://swatchly.xyz/palette/080514-250b3b-3e1c58-31487e-854a92 */
@theme {
  --color-obsidian-shard: #080514;
  --color-obsidian-shard-50: #f5f3ff;
  --color-obsidian-shard-100: #ebe9f9;
  --color-obsidian-shard-200: #d7d5e7;
  --color-obsidian-shard-300: #c1bed3;
  --color-obsidian-shard-400: #a19eb5;
  --color-obsidian-shard-500: #817d94;
  --color-obsidian-shard-600: #625e73;
  --color-obsidian-shard-700: #474456;
  --color-obsidian-shard-800: #302e3b;
  --color-obsidian-shard-900: #1d1b25;
  --color-obsidian-shard-950: #080514;
  --color-midnight-monarch: #250b3b;
  --color-midnight-monarch-50: #f8f2ff;
  --color-midnight-monarch-100: #f0e6ff;
  --color-midnight-monarch-200: #e1cdfb;
  --color-midnight-monarch-300: #ccb5e9;
  --color-midnight-monarch-400: #ae94cc;
  --color-midnight-monarch-500: #9278b0;
  --color-midnight-monarch-600: #765d92;
  --color-midnight-monarch-700: #5d4777;
  --color-midnight-monarch-800: #48355e;
  --color-midnight-monarch-900: #372648;
  --color-midnight-monarch-950: #250b3b;
  --color-plunged-into-darkness: #3e1c58;
  --color-plunged-into-darkness-50: #f8f2ff;
  --color-plunged-into-darkness-100: #f2e5ff;
  --color-plunged-into-darkness-200: #e5cbff;
  --color-plunged-into-darkness-300: #d1b2ef;
  --color-plunged-into-darkness-400: #b290d2;
  --color-plunged-into-darkness-500: #9673b6;
  --color-plunged-into-darkness-600: #7a5998;
  --color-plunged-into-darkness-700: #61437c;
  --color-plunged-into-darkness-800: #4c3163;
  --color-plunged-into-darkness-900: #3e1c58;
  --color-plunged-into-darkness-950: #241431;
  --color-nautical: #31487e;
  --color-nautical-50: #f0f5ff;
  --color-nautical-100: #e2ebff;
  --color-nautical-200: #c5d8ff;
  --color-nautical-300: #a9c2f8;
  --color-nautical-400: #89a4de;
  --color-nautical-500: #6f8ac5;
  --color-nautical-600: #5770a9;
  --color-nautical-700: #435b8f;
  --color-nautical-800: #31487e;
  --color-nautical-900: #263860;
  --color-nautical-950: #162341;
  --color-prunella: #854a92;
  --color-prunella-50: #fcf0ff;
  --color-prunella-100: #f9e0ff;
  --color-prunella-200: #f2c1fd;
  --color-prunella-300: #dda6ea;
  --color-prunella-400: #bf83cc;
  --color-prunella-500: #a265af;
  --color-prunella-600: #854a92;
  --color-prunella-700: #6b3877;
  --color-prunella-800: #562960;
  --color-prunella-900: #441d4c;
  --color-prunella-950: #2c1032;
}