Belladonna to Starstruck color palette

2B0015Belladonna 3B1027Chocolate Kiss 4D1249Velvet Cosmos 6F1D5CPretty in Prune 395D9CStarstruck

About this palette

Belladonna to Starstruck is a 5-color dark, warm palette: #2B0015 (Belladonna), #3B1027 (Chocolate Kiss), #4D1249 (Velvet Cosmos), #6F1D5C (Pretty in Prune), #395D9C (Starstruck). It mixes red, purple, blue tones and feels warm overall. The strongest text pairing is #2B0015 on #395D9C with a contrast ratio of 2.89:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Belladonna	rgb(43, 0, 21)	hsl(331, 100%, 8%)
Chocolate Kiss	rgb(59, 16, 39)	hsl(328, 57%, 15%)
Velvet Cosmos	rgb(77, 18, 73)	hsl(304, 62%, 19%)
Pretty in Prune	rgb(111, 29, 92)	hsl(314, 59%, 27%)
Starstruck	rgb(57, 93, 156)	hsl(218, 46%, 42%)

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

/* Belladonna to Starstruck — https://swatchly.xyz/palette/2b0015-3b1027-4d1249-6f1d5c-395d9c */
:root {
  --belladonna: #2b0015;
  --chocolate-kiss: #3b1027;
  --velvet-cosmos: #4d1249;
  --pretty-in-prune: #6f1d5c;
  --starstruck: #395d9c;
}

Tailwind CSS v4

/* Belladonna to Starstruck — https://swatchly.xyz/palette/2b0015-3b1027-4d1249-6f1d5c-395d9c */
@theme {
  --color-belladonna: #2b0015;
  --color-belladonna-50: #fff1f5;
  --color-belladonna-100: #ffe2ec;
  --color-belladonna-200: #f8c9d9;
  --color-belladonna-300: #e5b0c3;
  --color-belladonna-400: #c88ea4;
  --color-belladonna-500: #a97086;
  --color-belladonna-600: #895469;
  --color-belladonna-700: #6c3e50;
  --color-belladonna-800: #522b3b;
  --color-belladonna-900: #3b1d29;
  --color-belladonna-950: #2b0015;
  --color-chocolate-kiss: #3b1027;
  --color-chocolate-kiss-50: #fff1f7;
  --color-chocolate-kiss-100: #ffe2ee;
  --color-chocolate-kiss-200: #f5c9dc;
  --color-chocolate-kiss-300: #e2b1c6;
  --color-chocolate-kiss-400: #c490a7;
  --color-chocolate-kiss-500: #a9758d;
  --color-chocolate-kiss-600: #8d5b73;
  --color-chocolate-kiss-700: #74475c;
  --color-chocolate-kiss-800: #5e3649;
  --color-chocolate-kiss-900: #4b2939;
  --color-chocolate-kiss-950: #3b1027;
  --color-velvet-cosmos: #4d1249;
  --color-velvet-cosmos-50: #fff0fd;
  --color-velvet-cosmos-100: #ffe0fa;
  --color-velvet-cosmos-200: #f8c4f1;
  --color-velvet-cosmos-300: #e5aade;
  --color-velvet-cosmos-400: #c887c0;
  --color-velvet-cosmos-500: #ab6ba4;
  --color-velvet-cosmos-600: #8d5087;
  --color-velvet-cosmos-700: #723b6d;
  --color-velvet-cosmos-800: #5a2b56;
  --color-velvet-cosmos-900: #4d1249;
  --color-velvet-cosmos-950: #2c102a;
  --color-pretty-in-prune: #6f1d5c;
  --color-pretty-in-prune-50: #fff0fa;
  --color-pretty-in-prune-100: #ffe1f5;
  --color-pretty-in-prune-200: #ffc1eb;
  --color-pretty-in-prune-300: #f3a4da;
  --color-pretty-in-prune-400: #d781bd;
  --color-pretty-in-prune-500: #bb64a2;
  --color-pretty-in-prune-600: #9d4a87;
  --color-pretty-in-prune-700: #82366e;
  --color-pretty-in-prune-800: #6f1d5c;
  --color-pretty-in-prune-900: #541a46;
  --color-pretty-in-prune-950: #370d2d;
  --color-starstruck: #395d9c;
  --color-starstruck-50: #f0f5ff;
  --color-starstruck-100: #e1ecff;
  --color-starstruck-200: #c5daff;
  --color-starstruck-300: #a4c6ff;
  --color-starstruck-400: #81a7e8;
  --color-starstruck-500: #668dcf;
  --color-starstruck-600: #4e73b3;
  --color-starstruck-700: #395d9c;
  --color-starstruck-800: #2a487d;
  --color-starstruck-900: #1d3764;
  --color-starstruck-950: #0f2243;
}