Purple Sultan to Black Knight Color Palette

About this palette

Purple Sultan to Black Knight is a 4-color dark, cool palette: #7A3B82 (Purple Sultan), #58001B (Merguez), #3F3C58 (Storm Is Coming), #000B1C (Black Knight). It mixes pink, brown, purple, black tones and feels cool overall. The strongest text pairing is #7A3B82 on #000B1C with a contrast ratio of 2.61:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Purple Sultan	rgb(122, 59, 130)	hsl(293, 38%, 37%)
Merguez	rgb(88, 0, 27)	hsl(342, 100%, 17%)
Storm Is Coming	rgb(63, 60, 88)	hsl(246, 19%, 29%)
Black Knight	rgb(0, 11, 28)	hsl(216, 100%, 5%)

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

/* Purple Sultan to Black Knight — https://swatchly.xyz/palette/7a3b82-58001b-3f3c58-000b1c */
:root {
  --purple-sultan: #7a3b82;
  --merguez: #58001b;
  --storm-is-coming: #3f3c58;
  --black-knight: #000b1c;
}

Tailwind CSS v4

/* Purple Sultan to Black Knight — https://swatchly.xyz/palette/7a3b82-58001b-3f3c58-000b1c */
@theme {
  --color-purple-sultan: #7a3b82;
  --color-purple-sultan-50: #fef0ff;
  --color-purple-sultan-100: #fce1ff;
  --color-purple-sultan-200: #f7c3fd;
  --color-purple-sultan-300: #e5aaec;
  --color-purple-sultan-400: #c988d0;
  --color-purple-sultan-500: #ae6cb6;
  --color-purple-sultan-600: #92529a;
  --color-purple-sultan-700: #7a3b82;
  --color-purple-sultan-800: #602d67;
  --color-purple-sultan-900: #4c2051;
  --color-purple-sultan-950: #311135;
  --color-merguez: #58001b;
  --color-merguez-50: #fff1f2;
  --color-merguez-100: #ffe3e5;
  --color-merguez-200: #ffc7cb;
  --color-merguez-300: #faa6af;
  --color-merguez-400: #dd828c;
  --color-merguez-500: #bf6370;
  --color-merguez-600: #9e4955;
  --color-merguez-700: #803340;
  --color-merguez-800: #64232e;
  --color-merguez-900: #58001b;
  --color-merguez-950: #300b12;
  --color-storm-is-coming: #3f3c58;
  --color-storm-is-coming-50: #f4f4ff;
  --color-storm-is-coming-100: #eae8fe;
  --color-storm-is-coming-200: #d6d4ee;
  --color-storm-is-coming-300: #bfbdda;
  --color-storm-is-coming-400: #9f9cbc;
  --color-storm-is-coming-500: #8381a0;
  --color-storm-is-coming-600: #696684;
  --color-storm-is-coming-700: #52506a;
  --color-storm-is-coming-800: #3f3c58;
  --color-storm-is-coming-900: #302e42;
  --color-storm-is-coming-950: #1d1c2a;
  --color-black-knight: #000b1c;
  --color-black-knight-50: #eef6ff;
  --color-black-knight-100: #dfedfd;
  --color-black-knight-200: #c9daec;
  --color-black-knight-300: #b0c3d9;
  --color-black-knight-400: #8fa4bb;
  --color-black-knight-500: #6f849b;
  --color-black-knight-600: #52657b;
  --color-black-knight-700: #3a4a5d;
  --color-black-knight-800: #263442;
  --color-black-knight-900: #17212c;
  --color-black-knight-950: #000b1c;
}