Belladonna to Fedora Color Palette

About this palette

Belladonna to Fedora is a 5-color dark, gradient palette: #260017 (Belladonna), #001746 (Deadly Depths), #4C153D (Velvet Cosmos), #3D477E (Queen of the Night Shift), #625161 (Fedora). It mixes red, blue, gray tones and feels balanced overall. The strongest text pairing is #260017 on #625161 with a contrast ratio of 2.62:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Belladonna	rgb(38, 0, 23)	hsl(324, 100%, 7%)
Deadly Depths	rgb(0, 23, 70)	hsl(220, 100%, 14%)
Velvet Cosmos	rgb(76, 21, 61)	hsl(316, 57%, 19%)
Queen of the Night Shift	rgb(61, 71, 126)	hsl(231, 35%, 37%)
Fedora	rgb(98, 81, 97)	hsl(304, 9%, 35%)

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 Fedora — https://swatchly.xyz/palette/260017-001746-4c153d-3d477e-625161 */
:root {
  --belladonna: #260017;
  --deadly-depths: #001746;
  --velvet-cosmos: #4c153d;
  --queen-of-the-night-shift: #3d477e;
  --fedora: #625161;
}

Tailwind CSS v4

/* Belladonna to Fedora — https://swatchly.xyz/palette/260017-001746-4c153d-3d477e-625161 */
@theme {
  --color-belladonna: #260017;
  --color-belladonna-50: #fff1f7;
  --color-belladonna-100: #ffe2f0;
  --color-belladonna-200: #f4c9de;
  --color-belladonna-300: #e1b1c8;
  --color-belladonna-400: #c490aa;
  --color-belladonna-500: #a5718b;
  --color-belladonna-600: #85546e;
  --color-belladonna-700: #673d53;
  --color-belladonna-800: #4d2b3d;
  --color-belladonna-900: #371c2a;
  --color-belladonna-950: #260017;
  --color-deadly-depths: #001746;
  --color-deadly-depths-50: #f0f5ff;
  --color-deadly-depths-100: #e0ecff;
  --color-deadly-depths-200: #c2d9ff;
  --color-deadly-depths-300: #a3c2f5;
  --color-deadly-depths-400: #81a2da;
  --color-deadly-depths-500: #6486be;
  --color-deadly-depths-600: #4b6a9f;
  --color-deadly-depths-700: #375382;
  --color-deadly-depths-800: #273f68;
  --color-deadly-depths-900: #1b2f51;
  --color-deadly-depths-950: #001746;
  --color-velvet-cosmos: #4c153d;
  --color-velvet-cosmos-50: #fff0f9;
  --color-velvet-cosmos-100: #ffe1f4;
  --color-velvet-cosmos-200: #f9c6e6;
  --color-velvet-cosmos-300: #e6acd2;
  --color-velvet-cosmos-400: #c889b3;
  --color-velvet-cosmos-500: #ab6d96;
  --color-velvet-cosmos-600: #8d527a;
  --color-velvet-cosmos-700: #723d61;
  --color-velvet-cosmos-800: #592c4b;
  --color-velvet-cosmos-900: #4c153d;
  --color-velvet-cosmos-950: #2b1123;
  --color-queen-of-the-night-shift: #3d477e;
  --color-queen-of-the-night-shift-50: #f2f5ff;
  --color-queen-of-the-night-shift-100: #e5eaff;
  --color-queen-of-the-night-shift-200: #c9d4ff;
  --color-queen-of-the-night-shift-300: #adbaf2;
  --color-queen-of-the-night-shift-400: #8b98d4;
  --color-queen-of-the-night-shift-500: #6e7bb7;
  --color-queen-of-the-night-shift-600: #545f97;
  --color-queen-of-the-night-shift-700: #3d477e;
  --color-queen-of-the-night-shift-800: #2f3761;
  --color-queen-of-the-night-shift-900: #232a4d;
  --color-queen-of-the-night-shift-950: #141932;
  --color-fedora: #625161;
  --color-fedora-50: #fcf1fb;
  --color-fedora-100: #f3e7f2;
  --color-fedora-200: #e1d2e0;
  --color-fedora-300: #ccbccb;
  --color-fedora-400: #ae9cad;
  --color-fedora-500: #938192;
  --color-fedora-600: #796778;
  --color-fedora-700: #625161;
  --color-fedora-800: #4d3f4c;
  --color-fedora-900: #3b303b;
  --color-fedora-950: #251d25;
}