Ninja Princess to Shadow Purple Color Palette

About this palette

Ninja Princess to Shadow Purple is a 5-color dark, cool palette: #7A548A (Ninja Princess), #561B46 (Soul Anchor), #270005 (Belladonna), #112348 (Dark Eclipse), #4F394E (Shadow Purple). It mixes purple, brown, blue tones and feels cool overall. The strongest text pairing is #7A548A on #270005 with a contrast ratio of 3.18:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Ninja Princess	rgb(122, 84, 138)	hsl(282, 24%, 44%)
Soul Anchor	rgb(86, 27, 70)	hsl(316, 52%, 22%)
Belladonna	rgb(39, 0, 5)	hsl(352, 100%, 8%)
Dark Eclipse	rgb(17, 35, 72)	hsl(220, 62%, 17%)
Shadow Purple	rgb(79, 57, 78)	hsl(303, 16%, 27%)

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.18:1 Poor#7A548A on #270005
Aa3.18:1 Poor#270005 on #7A548A

Color blindness preview

CSS variables

/* Ninja Princess to Shadow Purple — https://swatchly.xyz/palette/7a548a-561b46-270005-112348-4f394e */
:root {
  --ninja-princess: #7a548a;
  --soul-anchor: #561b46;
  --belladonna: #270005;
  --dark-eclipse: #112348;
  --shadow-purple: #4f394e;
}

Tailwind CSS v4

/* Ninja Princess to Shadow Purple — https://swatchly.xyz/palette/7a548a-561b46-270005-112348-4f394e */
@theme {
  --color-ninja-princess: #7a548a;
  --color-ninja-princess-50: #fbf1ff;
  --color-ninja-princess-100: #f6e1ff;
  --color-ninja-princess-200: #e7c8f5;
  --color-ninja-princess-300: #d2aee2;
  --color-ninja-princess-400: #b38cc4;
  --color-ninja-princess-500: #966fa7;
  --color-ninja-princess-600: #7a548a;
  --color-ninja-princess-700: #624170;
  --color-ninja-princess-800: #4e315a;
  --color-ninja-princess-900: #3d2447;
  --color-ninja-princess-950: #27152e;
  --color-soul-anchor: #561b46;
  --color-soul-anchor-50: #fff0f9;
  --color-soul-anchor-100: #ffe1f4;
  --color-soul-anchor-200: #fbc4e7;
  --color-soul-anchor-300: #e8abd3;
  --color-soul-anchor-400: #cc8ab6;
  --color-soul-anchor-500: #b06e9b;
  --color-soul-anchor-600: #945580;
  --color-soul-anchor-700: #7a4068;
  --color-soul-anchor-800: #633054;
  --color-soul-anchor-900: #561b46;
  --color-soul-anchor-950: #34142b;
  --color-belladonna: #270005;
  --color-belladonna-50: #fff1f1;
  --color-belladonna-100: #ffe4e4;
  --color-belladonna-200: #f8cbcb;
  --color-belladonna-300: #e5b2b3;
  --color-belladonna-400: #c89192;
  --color-belladonna-500: #a87273;
  --color-belladonna-600: #885557;
  --color-belladonna-700: #6a3e40;
  --color-belladonna-800: #4f2b2c;
  --color-belladonna-900: #371c1d;
  --color-belladonna-950: #270005;
  --color-dark-eclipse: #112348;
  --color-dark-eclipse-50: #f0f5ff;
  --color-dark-eclipse-100: #e1ecff;
  --color-dark-eclipse-200: #c5d8fc;
  --color-dark-eclipse-300: #acc2ea;
  --color-dark-eclipse-400: #8aa2ce;
  --color-dark-eclipse-500: #7087b4;
  --color-dark-eclipse-600: #586e98;
  --color-dark-eclipse-700: #44587f;
  --color-dark-eclipse-800: #344669;
  --color-dark-eclipse-900: #283755;
  --color-dark-eclipse-950: #112348;
  --color-shadow-purple: #4f394e;
  --color-shadow-purple-50: #fff0fe;
  --color-shadow-purple-100: #f6e5f5;
  --color-shadow-purple-200: #e4d0e3;
  --color-shadow-purple-300: #cfb8ce;
  --color-shadow-purple-400: #b198af;
  --color-shadow-purple-500: #957c94;
  --color-shadow-purple-600: #7a6279;
  --color-shadow-purple-700: #624d61;
  --color-shadow-purple-800: #4f394e;
  --color-shadow-purple-900: #3c2c3b;
  --color-shadow-purple-950: #261a25;
}