Belladonna to Jazz Color Palette

About this palette

Belladonna to Jazz is a 4-color dark, warm palette: #1C0015 (Belladonna), #510105 (Burned), #9A413A (Red My Mind), #5E252B (Jazz). It mixes purple, brown, red tones and feels warm overall. The strongest text pairing is #1C0015 on #9A413A with a contrast ratio of 3.01:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Belladonna	rgb(28, 0, 21)	hsl(315, 100%, 5%)
Burned	rgb(81, 1, 5)	hsl(357, 98%, 16%)
Red My Mind	rgb(154, 65, 58)	hsl(4, 45%, 42%)
Jazz	rgb(94, 37, 43)	hsl(354, 44%, 26%)

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.

Aa3.01:1 Poor#1C0015 on #9A413A
Aa3.01:1 Poor#9A413A on #1C0015

Color blindness preview

CSS variables

/* Belladonna to Jazz — https://swatchly.xyz/palette/1c0015-510105-9a413a-5e252b */
:root {
  --belladonna: #1c0015;
  --burned: #510105;
  --red-my-mind: #9a413a;
  --jazz: #5e252b;
}

Tailwind CSS v4

/* Belladonna to Jazz — https://swatchly.xyz/palette/1c0015-510105-9a413a-5e252b */
@theme {
  --color-belladonna: #1c0015;
  --color-belladonna-50: #fff0fa;
  --color-belladonna-100: #ffe1f5;
  --color-belladonna-200: #efcbe3;
  --color-belladonna-300: #dbb3cd;
  --color-belladonna-400: #bd92af;
  --color-belladonna-500: #9d728f;
  --color-belladonna-600: #7c5570;
  --color-belladonna-700: #5f3d54;
  --color-belladonna-800: #44293c;
  --color-belladonna-900: #2d1927;
  --color-belladonna-950: #1c0015;
  --color-burned: #510105;
  --color-burned-50: #fff2f0;
  --color-burned-100: #ffe4e1;
  --color-burned-200: #ffc8c2;
  --color-burned-300: #f8a9a1;
  --color-burned-400: #dc877e;
  --color-burned-500: #c26c64;
  --color-burned-600: #a5534c;
  --color-burned-700: #8b403a;
  --color-burned-800: #74302c;
  --color-burned-900: #602521;
  --color-burned-950: #510105;
  --color-red-my-mind: #9a413a;
  --color-red-my-mind-50: #fff2f0;
  --color-red-my-mind-100: #ffe1dd;
  --color-red-my-mind-200: #ffc2bb;
  --color-red-my-mind-300: #f8a096;
  --color-red-my-mind-400: #d97c72;
  --color-red-my-mind-500: #ba5e55;
  --color-red-my-mind-600: #9a413a;
  --color-red-my-mind-700: #7d312b;
  --color-red-my-mind-800: #65231e;
  --color-red-my-mind-900: #511915;
  --color-red-my-mind-950: #350d0a;
  --color-jazz: #5e252b;
  --color-jazz-50: #fff1f2;
  --color-jazz-100: #ffe4e4;
  --color-jazz-200: #fec8ca;
  --color-jazz-300: #ebafb1;
  --color-jazz-400: #d08f92;
  --color-jazz-500: #b67478;
  --color-jazz-600: #9a5b5f;
  --color-jazz-700: #81474b;
  --color-jazz-800: #6b373b;
  --color-jazz-900: #5e252b;
  --color-jazz-950: #3a191c;
}