Start generating

Belladonna to Mystic Nights color palette

2A0011Belladonna71507ENinja Princess2B1935Dark Prom Queen462000Chocolate Castle543F82Kingfisher Daisy4A2878Mystic Nights
Open in generator Export PNG, PDF, ASE…

About this palette

Belladonna to Mystic Nights is a 6-color dark, cool palette: #2A0011 (Belladonna), #71507E (Ninja Princess), #2B1935 (Dark Prom Queen), #462000 (Chocolate Castle), #543F82 (Kingfisher Daisy), #4A2878 (Mystic Nights). It mixes red, purple, brown tones and feels cool overall. The strongest text pairing is #2A0011 on #71507E with a contrast ratio of 2.85:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Belladonnargb(42, 0, 17)hsl(336, 100%, 8%)
Ninja Princessrgb(113, 80, 126)hsl(283, 22%, 40%)
Dark Prom Queenrgb(43, 25, 53)hsl(279, 36%, 15%)
Chocolate Castlergb(70, 32, 0)hsl(27, 100%, 14%)
Kingfisher Daisyrgb(84, 63, 130)hsl(259, 35%, 38%)
Mystic Nightsrgb(74, 40, 120)hsl(266, 50%, 31%)

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

    • Protanopia
    • Deuteranopia
    • Tritanopia
    • Achromatopsia
    • Dog vision

    CSS variables

    /* Belladonna to Mystic Nights — https://swatchly.xyz/palette/2a0011-71507e-2b1935-462000-543f82-4a2878 */
:root {
  --belladonna: #2a0011;
  --ninja-princess: #71507e;
  --dark-prom-queen: #2b1935;
  --chocolate-castle: #462000;
  --kingfisher-daisy: #543f82;
  --mystic-nights: #4a2878;
}

    Tailwind CSS v4

    /* Belladonna to Mystic Nights — https://swatchly.xyz/palette/2a0011-71507e-2b1935-462000-543f82-4a2878 */
@theme {
  --color-belladonna: #2a0011;
  --color-belladonna-50: #fff1f4;
  --color-belladonna-100: #ffe3ea;
  --color-belladonna-200: #f8c9d6;
  --color-belladonna-300: #e5b0bf;
  --color-belladonna-400: #c88f9f;
  --color-belladonna-500: #a97081;
  --color-belladonna-600: #895464;
  --color-belladonna-700: #6c3e4c;
  --color-belladonna-800: #512b37;
  --color-belladonna-900: #3a1d26;
  --color-belladonna-950: #2a0011;
  --color-ninja-princess: #71507e;
  --color-ninja-princess-50: #fbf1ff;
  --color-ninja-princess-100: #f7e3ff;
  --color-ninja-princess-200: #e9cef4;
  --color-ninja-princess-300: #d6b8e3;
  --color-ninja-princess-400: #ba98c8;
  --color-ninja-princess-500: #a17eaf;
  --color-ninja-princess-600: #876594;
  --color-ninja-princess-700: #71507e;
  --color-ninja-princess-800: #593d64;
  --color-ninja-princess-900: #462e4f;
  --color-ninja-princess-950: #2d1b34;
  --color-dark-prom-queen: #2b1935;
  --color-dark-prom-queen-50: #faf2ff;
  --color-dark-prom-queen-100: #f3e5fc;
  --color-dark-prom-queen-200: #e1d0ec;
  --color-dark-prom-queen-300: #ccb8d8;
  --color-dark-prom-queen-400: #ad98ba;
  --color-dark-prom-queen-500: #927d9f;
  --color-dark-prom-queen-600: #786484;
  --color-dark-prom-queen-700: #614e6c;
  --color-dark-prom-queen-800: #4d3d57;
  --color-dark-prom-queen-900: #3d2f45;
  --color-dark-prom-queen-950: #2b1935;
  --color-chocolate-castle: #462000;
  --color-chocolate-castle-50: #fff2ea;
  --color-chocolate-castle-100: #ffe6d5;
  --color-chocolate-castle-200: #f4cfb7;
  --color-chocolate-castle-300: #e1b79b;
  --color-chocolate-castle-400: #c29577;
  --color-chocolate-castle-500: #a57859;
  --color-chocolate-castle-600: #875d3f;
  --color-chocolate-castle-700: #6c462c;
  --color-chocolate-castle-800: #53341d;
  --color-chocolate-castle-900: #462000;
  --color-chocolate-castle-950: #271508;
  --color-kingfisher-daisy: #543f82;
  --color-kingfisher-daisy-50: #f6f3ff;
  --color-kingfisher-daisy-100: #ede7ff;
  --color-kingfisher-daisy-200: #d9ceff;
  --color-kingfisher-daisy-300: #c3b2f4;
  --color-kingfisher-daisy-400: #a390d8;
  --color-kingfisher-daisy-500: #8773ba;
  --color-kingfisher-daisy-600: #6b579b;
  --color-kingfisher-daisy-700: #543f82;
  --color-kingfisher-daisy-800: #413165;
  --color-kingfisher-daisy-900: #322550;
  --color-kingfisher-daisy-950: #1f1534;
  --color-mystic-nights: #4a2878;
  --color-mystic-nights-50: #f6f3ff;
  --color-mystic-nights-100: #eee7ff;
  --color-mystic-nights-200: #deceff;
  --color-mystic-nights-300: #cab0fe;
  --color-mystic-nights-400: #ac8de3;
  --color-mystic-nights-500: #9070c7;
  --color-mystic-nights-600: #7455a7;
  --color-mystic-nights-700: #5c4089;
  --color-mystic-nights-800: #4a2878;
  --color-mystic-nights-900: #372258;
  --color-mystic-nights-950: #221339;
}

    Similar palettes