Belladonna to Grapes of Italy Color Palette

About this palette

Belladonna to Grapes of Italy is a 5-color dark, cool, gradient palette: #1F000C (Belladonna), #340E19 (Black Cherry), #432749 (Purple Void), #423873 (Galactic Compass), #774383 (Grapes of Italy). It mixes red, purple tones and feels cool overall. The strongest text pairing is #1F000C on #774383 with a contrast ratio of 2.74:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Belladonna	rgb(31, 0, 12)	hsl(337, 100%, 6%)
Black Cherry	rgb(52, 14, 25)	hsl(343, 58%, 13%)
Purple Void	rgb(67, 39, 73)	hsl(289, 30%, 22%)
Galactic Compass	rgb(66, 56, 115)	hsl(250, 35%, 34%)
Grapes of Italy	rgb(119, 67, 131)	hsl(289, 32%, 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 Grapes of Italy — https://swatchly.xyz/palette/1f000c-340e19-432749-423873-774383 */
:root {
  --belladonna: #1f000c;
  --black-cherry: #340e19;
  --purple-void: #432749;
  --galactic-compass: #423873;
  --grapes-of-italy: #774383;
}

Tailwind CSS v4

/* Belladonna to Grapes of Italy — https://swatchly.xyz/palette/1f000c-340e19-432749-423873-774383 */
@theme {
  --color-belladonna: #1f000c;
  --color-belladonna-50: #fff1f5;
  --color-belladonna-100: #ffe3eb;
  --color-belladonna-200: #f3cbd7;
  --color-belladonna-300: #dfb3c0;
  --color-belladonna-400: #c292a1;
  --color-belladonna-500: #a27281;
  --color-belladonna-600: #815563;
  --color-belladonna-700: #623d49;
  --color-belladonna-800: #472933;
  --color-belladonna-900: #301a21;
  --color-belladonna-950: #1f000c;
  --color-black-cherry: #340e19;
  --color-black-cherry-50: #fff1f3;
  --color-black-cherry-100: #ffe3e8;
  --color-black-cherry-200: #f3ccd3;
  --color-black-cherry-300: #e0b3bc;
  --color-black-cherry-400: #c3929c;
  --color-black-cherry-500: #a77680;
  --color-black-cherry-600: #8a5c66;
  --color-black-cherry-700: #6f474f;
  --color-black-cherry-800: #58353d;
  --color-black-cherry-900: #44272e;
  --color-black-cherry-950: #340e19;
  --color-purple-void: #432749;
  --color-purple-void-50: #fcf0ff;
  --color-purple-void-100: #f9e3fd;
  --color-purple-void-200: #e7cded;
  --color-purple-void-300: #d2b5d9;
  --color-purple-void-400: #b595bb;
  --color-purple-void-500: #9979a0;
  --color-purple-void-600: #7e5f85;
  --color-purple-void-700: #664a6c;
  --color-purple-void-800: #513956;
  --color-purple-void-900: #432749;
  --color-purple-void-950: #28192b;
  --color-galactic-compass: #423873;
  --color-galactic-compass-50: #f4f4ff;
  --color-galactic-compass-100: #eae8ff;
  --color-galactic-compass-200: #d5d2ff;
  --color-galactic-compass-300: #beb9f4;
  --color-galactic-compass-400: #9f98d9;
  --color-galactic-compass-500: #847cbe;
  --color-galactic-compass-600: #6a62a0;
  --color-galactic-compass-700: #544c85;
  --color-galactic-compass-800: #423873;
  --color-galactic-compass-900: #322c56;
  --color-galactic-compass-950: #1f1a38;
  --color-grapes-of-italy: #774383;
  --color-grapes-of-italy-50: #fcf0ff;
  --color-grapes-of-italy-100: #fae2ff;
  --color-grapes-of-italy-200: #f2c7fc;
  --color-grapes-of-italy-300: #e0afeb;
  --color-grapes-of-italy-400: #c38ed0;
  --color-grapes-of-italy-500: #a972b6;
  --color-grapes-of-italy-600: #8e599a;
  --color-grapes-of-italy-700: #774383;
  --color-grapes-of-italy-800: #5e3368;
  --color-grapes-of-italy-900: #4a2552;
  --color-grapes-of-italy-950: #301536;
}