Belladonna to Bellflower Color Palette

About this palette

Belladonna to Bellflower is a 4-color dark, gradient palette: #2A0016 (Belladonna), #4D0033 (Dark Sanctuary), #303A6E (Good Karma), #585AAF (Bellflower). It mixes red, blue, purple tones and feels balanced overall. The strongest text pairing is #2A0016 on #585AAF with a contrast ratio of 3.15:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Belladonna	rgb(42, 0, 22)	hsl(329, 100%, 8%)
Dark Sanctuary	rgb(77, 0, 51)	hsl(320, 100%, 15%)
Good Karma	rgb(48, 58, 110)	hsl(230, 39%, 31%)
Bellflower	rgb(88, 90, 175)	hsl(239, 35%, 52%)

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.15:1 Poor#2A0016 on #585AAF
Aa3.15:1 Poor#585AAF on #2A0016

Color blindness preview

CSS variables

/* Belladonna to Bellflower — https://swatchly.xyz/palette/2a0016-4d0033-303a6e-585aaf */
:root {
  --belladonna: #2a0016;
  --dark-sanctuary: #4d0033;
  --good-karma: #303a6e;
  --bellflower: #585aaf;
}

Tailwind CSS v4

/* Belladonna to Bellflower — https://swatchly.xyz/palette/2a0016-4d0033-303a6e-585aaf */
@theme {
  --color-belladonna: #2a0016;
  --color-belladonna-50: #fff1f6;
  --color-belladonna-100: #ffe2ed;
  --color-belladonna-200: #f7c9db;
  --color-belladonna-300: #e4b0c5;
  --color-belladonna-400: #c78fa5;
  --color-belladonna-500: #a87088;
  --color-belladonna-600: #88546a;
  --color-belladonna-700: #6b3d51;
  --color-belladonna-800: #512b3c;
  --color-belladonna-900: #3b1d2a;
  --color-belladonna-950: #2a0016;
  --color-dark-sanctuary: #4d0033;
  --color-dark-sanctuary-50: #fff1f7;
  --color-dark-sanctuary-100: #ffe2f0;
  --color-dark-sanctuary-200: #ffc3e1;
  --color-dark-sanctuary-300: #f1a7cd;
  --color-dark-sanctuary-400: #d584af;
  --color-dark-sanctuary-500: #bb6995;
  --color-dark-sanctuary-600: #9f517c;
  --color-dark-sanctuary-700: #863e66;
  --color-dark-sanctuary-800: #6f2f54;
  --color-dark-sanctuary-900: #5c2344;
  --color-dark-sanctuary-950: #4d0033;
  --color-good-karma: #303a6e;
  --color-good-karma-50: #f2f5ff;
  --color-good-karma-100: #e4eaff;
  --color-good-karma-200: #cad6ff;
  --color-good-karma-300: #afbef3;
  --color-good-karma-400: #8e9dd7;
  --color-good-karma-500: #7281bb;
  --color-good-karma-600: #59659c;
  --color-good-karma-700: #444f80;
  --color-good-karma-800: #303a6e;
  --color-good-karma-900: #262d51;
  --color-good-karma-950: #161b34;
  --color-bellflower: #585aaf;
  --color-bellflower-50: #f3f4ff;
  --color-bellflower-100: #e5e8ff;
  --color-bellflower-200: #ccd1ff;
  --color-bellflower-300: #b0b7ff;
  --color-bellflower-400: #8d93eb;
  --color-bellflower-500: #7276ce;
  --color-bellflower-600: #585aaf;
  --color-bellflower-700: #454690;
  --color-bellflower-800: #353576;
  --color-bellflower-900: #28285e;
  --color-bellflower-950: #18173f;
}