Belladonna to Raspberry Romantic Color Palette

About this palette

Belladonna to Raspberry Romantic is a 4-color dark, warm, gradient palette: #1B0109 (Belladonna), #3B1C00 (Medium Roast), #414800 (Green Not Found), #933156 (Raspberry Romantic). It mixes black, brown, green, red tones and feels warm overall. The strongest text pairing is #1B0109 on #933156 with a contrast ratio of 2.67:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Belladonna	rgb(27, 1, 9)	hsl(342, 93%, 5%)
Medium Roast	rgb(59, 28, 0)	hsl(28, 100%, 12%)
Green Not Found	rgb(65, 72, 0)	hsl(66, 100%, 14%)
Raspberry Romantic	rgb(147, 49, 86)	hsl(337, 50%, 38%)

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 Raspberry Romantic — https://swatchly.xyz/palette/1b0109-3b1c00-414800-933156 */
:root {
  --belladonna: #1b0109;
  --medium-roast: #3b1c00;
  --green-not-found: #414800;
  --raspberry-romantic: #933156;
}

Tailwind CSS v4

/* Belladonna to Raspberry Romantic — https://swatchly.xyz/palette/1b0109-3b1c00-414800-933156 */
@theme {
  --color-belladonna: #1b0109;
  --color-belladonna-50: #fff1f4;
  --color-belladonna-100: #ffe3ea;
  --color-belladonna-200: #f0cdd6;
  --color-belladonna-300: #dcb5bf;
  --color-belladonna-400: #be949f;
  --color-belladonna-500: #9e747f;
  --color-belladonna-600: #7d5761;
  --color-belladonna-700: #5e3e47;
  --color-belladonna-800: #442a31;
  --color-belladonna-900: #2c191f;
  --color-belladonna-950: #1b0109;
  --color-medium-roast: #3b1c00;
  --color-medium-roast-50: #fff3e9;
  --color-medium-roast-100: #ffe6d3;
  --color-medium-roast-200: #f0d1ba;
  --color-medium-roast-300: #dcb99f;
  --color-medium-roast-400: #bf997c;
  --color-medium-roast-500: #a47e61;
  --color-medium-roast-600: #8a6549;
  --color-medium-roast-700: #725137;
  --color-medium-roast-800: #5d3f28;
  --color-medium-roast-900: #4b321d;
  --color-medium-roast-950: #3b1c00;
  --color-green-not-found: #414800;
  --color-green-not-found-50: #f3fad6;
  --color-green-not-found-100: #e9f0c8;
  --color-green-not-found-200: #d5ddad;
  --color-green-not-found-300: #bec890;
  --color-green-not-found-400: #9fa96b;
  --color-green-not-found-500: #848d4e;
  --color-green-not-found-600: #6a7234;
  --color-green-not-found-700: #545b21;
  --color-green-not-found-800: #414800;
  --color-green-not-found-900: #32370a;
  --color-green-not-found-950: #1f2203;
  --color-raspberry-romantic: #933156;
  --color-raspberry-romantic-50: #fff1f4;
  --color-raspberry-romantic-100: #ffe3ea;
  --color-raspberry-romantic-200: #ffc7d6;
  --color-raspberry-romantic-300: #ffa4bf;
  --color-raspberry-romantic-400: #e580a0;
  --color-raspberry-romantic-500: #ca6385;
  --color-raspberry-romantic-600: #ac496c;
  --color-raspberry-romantic-700: #933156;
  --color-raspberry-romantic-800: #752443;
  --color-raspberry-romantic-900: #5d1833;
  --color-raspberry-romantic-950: #3e0b1f;
}