Midnight Edition to Grapes of Italy Color Palette

About this palette

Midnight Edition to Grapes of Italy is a 4-color dark, cool, gradient palette: #00131A (Midnight Edition), #29015D (Blackmail), #193F55 (Capital Blue), #6F4487 (Grapes of Italy). It mixes black, purple, blue tones and feels cool overall. The strongest text pairing is #00131A on #6F4487 with a contrast ratio of 2.57:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Midnight Edition	rgb(0, 19, 26)	hsl(196, 100%, 5%)
Blackmail	rgb(41, 1, 93)	hsl(266, 98%, 18%)
Capital Blue	rgb(25, 63, 85)	hsl(202, 55%, 22%)
Grapes of Italy	rgb(111, 68, 135)	hsl(279, 33%, 40%)

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

/* Midnight Edition to Grapes of Italy — https://swatchly.xyz/palette/00131a-29015d-193f55-6f4487 */
:root {
  --midnight-edition: #00131a;
  --blackmail: #29015d;
  --capital-blue: #193f55;
  --grapes-of-italy: #6f4487;
}

Tailwind CSS v4

/* Midnight Edition to Grapes of Italy — https://swatchly.xyz/palette/00131a-29015d-193f55-6f4487 */
@theme {
  --color-midnight-edition: #00131a;
  --color-midnight-edition-50: #e9f8fe;
  --color-midnight-edition-100: #deeff5;
  --color-midnight-edition-200: #c7dbe3;
  --color-midnight-edition-300: #afc5ce;
  --color-midnight-edition-400: #8da6af;
  --color-midnight-edition-500: #6e8891;
  --color-midnight-edition-600: #526a72;
  --color-midnight-edition-700: #3b5057;
  --color-midnight-edition-800: #293a40;
  --color-midnight-edition-900: #1a272c;
  --color-midnight-edition-950: #00131a;
  --color-blackmail: #29015d;
  --color-blackmail-50: #f5f3ff;
  --color-blackmail-100: #ebe8ff;
  --color-blackmail-200: #d8d0ff;
  --color-blackmail-300: #c3b5ff;
  --color-blackmail-400: #a491ed;
  --color-blackmail-500: #8a75d2;
  --color-blackmail-600: #715bb5;
  --color-blackmail-700: #5b4598;
  --color-blackmail-800: #48347d;
  --color-blackmail-900: #392766;
  --color-blackmail-950: #29015d;
  --color-capital-blue: #193f55;
  --color-capital-blue-50: #ebf7ff;
  --color-capital-blue-100: #d7efff;
  --color-capital-blue-200: #bedcf1;
  --color-capital-blue-300: #a2c5dc;
  --color-capital-blue-400: #7ea4bd;
  --color-capital-blue-500: #6187a0;
  --color-capital-blue-600: #466b83;
  --color-capital-blue-700: #325368;
  --color-capital-blue-800: #193f55;
  --color-capital-blue-900: #18303e;
  --color-capital-blue-950: #0c1d27;
  --color-grapes-of-italy: #6f4487;
  --color-grapes-of-italy-50: #faf2ff;
  --color-grapes-of-italy-100: #f4e4ff;
  --color-grapes-of-italy-200: #eacaff;
  --color-grapes-of-italy-300: #d8b1f0;
  --color-grapes-of-italy-400: #bb90d5;
  --color-grapes-of-italy-500: #a174bb;
  --color-grapes-of-italy-600: #865a9f;
  --color-grapes-of-italy-700: #6f4487;
  --color-grapes-of-italy-800: #57346b;
  --color-grapes-of-italy-900: #442655;
  --color-grapes-of-italy-950: #2c1638;
}