Belladonna to Grape Kiss color palette

1C0016Belladonna 340626Vienna Roast 4E001CWhat We Do in the Shadows 52242CLonestar 493D5EStorm Is Coming 7E486FGrape Kiss

Open in generator Export PNG, PDF, ASE…

About this palette

Belladonna to Grape Kiss is a 6-color dark, warm, gradient palette: #1C0016 (Belladonna), #340626 (Vienna Roast), #4E001C (What We Do in the Shadows), #52242C (Lonestar), #493D5E (Storm Is Coming), #7E486F (Grape Kiss). It mixes purple, red, brown, pink tones and feels warm overall. The strongest text pairing is #1C0016 on #7E486F with a contrast ratio of 2.87:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Belladonna	rgb(28, 0, 22)	hsl(313, 100%, 5%)
Vienna Roast	rgb(52, 6, 38)	hsl(318, 79%, 11%)
What We Do in the Shadows	rgb(78, 0, 28)	hsl(338, 100%, 15%)
Lonestar	rgb(82, 36, 44)	hsl(350, 39%, 23%)
Storm Is Coming	rgb(73, 61, 94)	hsl(262, 21%, 30%)
Grape Kiss	rgb(126, 72, 111)	hsl(317, 27%, 39%)

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 Grape Kiss — https://swatchly.xyz/palette/1c0016-340626-4e001c-52242c-493d5e-7e486f */
:root {
  --belladonna: #1c0016;
  --vienna-roast: #340626;
  --what-we-do-in-the-shadows: #4e001c;
  --lonestar: #52242c;
  --storm-is-coming: #493d5e;
  --grape-kiss: #7e486f;
}

Tailwind CSS v4

/* Belladonna to Grape Kiss — https://swatchly.xyz/palette/1c0016-340626-4e001c-52242c-493d5e-7e486f */
@theme {
  --color-belladonna: #1c0016;
  --color-belladonna-50: #fff0fa;
  --color-belladonna-100: #ffe1f5;
  --color-belladonna-200: #eecbe4;
  --color-belladonna-300: #dab3cf;
  --color-belladonna-400: #bd92b0;
  --color-belladonna-500: #9d7291;
  --color-belladonna-600: #7c5571;
  --color-belladonna-700: #5e3d55;
  --color-belladonna-800: #44293d;
  --color-belladonna-900: #2e1a28;
  --color-belladonna-950: #1c0016;
  --color-vienna-roast: #340626;
  --color-vienna-roast-50: #fff0f8;
  --color-vienna-roast-100: #ffe1f2;
  --color-vienna-roast-200: #f6c8e2;
  --color-vienna-roast-300: #e2afcd;
  --color-vienna-roast-400: #c58eaf;
  --color-vienna-roast-500: #a97193;
  --color-vienna-roast-600: #8b5777;
  --color-vienna-roast-700: #70425e;
  --color-vienna-roast-800: #593049;
  --color-vienna-roast-900: #442338;
  --color-vienna-roast-950: #340626;
  --color-what-we-do-in-the-shadows: #4e001c;
  --color-what-we-do-in-the-shadows-50: #fff1f3;
  --color-what-we-do-in-the-shadows-100: #ffe3e7;
  --color-what-we-do-in-the-shadows-200: #ffc6cf;
  --color-what-we-do-in-the-shadows-300: #f6a8b5;
  --color-what-we-do-in-the-shadows-400: #d98594;
  --color-what-we-do-in-the-shadows-500: #bf6a7b;
  --color-what-we-do-in-the-shadows-600: #a25262;
  --color-what-we-do-in-the-shadows-700: #883e4e;
  --color-what-we-do-in-the-shadows-800: #712f3e;
  --color-what-we-do-in-the-shadows-900: #5d2331;
  --color-what-we-do-in-the-shadows-950: #4e001c;
  --color-lonestar: #52242c;
  --color-lonestar-50: #fff1f3;
  --color-lonestar-100: #ffe3e6;
  --color-lonestar-200: #f7cacf;
  --color-lonestar-300: #e4b2b8;
  --color-lonestar-400: #c79198;
  --color-lonestar-500: #ac767d;
  --color-lonestar-600: #905c63;
  --color-lonestar-700: #76474e;
  --color-lonestar-800: #5f363c;
  --color-lonestar-900: #52242c;
  --color-lonestar-950: #31181c;
  --color-storm-is-coming: #493d5e;
  --color-storm-is-coming-50: #f7f3ff;
  --color-storm-is-coming-100: #eee7ff;
  --color-storm-is-coming-200: #dcd2f0;
  --color-storm-is-coming-300: #c6bbdc;
  --color-storm-is-coming-400: #a79bc0;
  --color-storm-is-coming-500: #8c80a5;
  --color-storm-is-coming-600: #726689;
  --color-storm-is-coming-700: #5b5070;
  --color-storm-is-coming-800: #493d5e;
  --color-storm-is-coming-900: #382f47;
  --color-storm-is-coming-950: #231d2e;
  --color-grape-kiss: #7e486f;
  --color-grape-kiss-50: #fff0fa;
  --color-grape-kiss-100: #ffe1f5;
  --color-grape-kiss-200: #f7c9e8;
  --color-grape-kiss-300: #e6b1d5;
  --color-grape-kiss-400: #ca91b9;
  --color-grape-kiss-500: #b0769f;
  --color-grape-kiss-600: #955d85;
  --color-grape-kiss-700: #7e486f;
  --color-grape-kiss-800: #643758;
  --color-grape-kiss-900: #4f2844;
  --color-grape-kiss-950: #33172c;
}