Midnight to Ultrapurple Merge color palette

About this palette

Midnight to Ultrapurple Merge is a 5-color dark, cool palette: #0D002A (Midnight), #281329 (Dark Prom Queen), #4C2B3F (Wine Tasting), #6C332E (Kenyan Copper), #5B57B2 (Ultrapurple Merge). It mixes purple, red, brown tones and feels cool overall. The strongest text pairing is #0D002A on #5B57B2 with a contrast ratio of 3.28:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Midnightrgb(13, 0, 42)hsl(259, 100%, 8%)
Dark Prom Queenrgb(40, 19, 41)hsl(297, 37%, 12%)
Wine Tastingrgb(76, 43, 63)hsl(324, 28%, 23%)
Kenyan Copperrgb(108, 51, 46)hsl(5, 40%, 30%)
Ultrapurple Mergergb(91, 87, 178)hsl(243, 37%, 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.28:1 Poor#0D002A on #5B57B2
  • Aa3.28:1 Poor#5B57B2 on #0D002A

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Midnight to Ultrapurple Merge — https://swatchly.xyz/palette/0d002a-281329-4c2b3f-6c332e-5b57b2 */
:root {
  --midnight: #0d002a;
  --dark-prom-queen: #281329;
  --wine-tasting: #4c2b3f;
  --kenyan-copper: #6c332e;
  --ultrapurple-merge: #5b57b2;
}

Tailwind CSS v4

/* Midnight to Ultrapurple Merge — https://swatchly.xyz/palette/0d002a-281329-4c2b3f-6c332e-5b57b2 */
@theme {
  --color-midnight: #0d002a;
  --color-midnight-50: #f5f4ff;
  --color-midnight-100: #eae8ff;
  --color-midnight-200: #d6d1fe;
  --color-midnight-300: #c0baed;
  --color-midnight-400: #a099d1;
  --color-midnight-500: #8179b0;
  --color-midnight-600: #625b8e;
  --color-midnight-700: #48416d;
  --color-midnight-800: #322c4f;
  --color-midnight-900: #201b35;
  --color-midnight-950: #0d002a;
  --color-dark-prom-queen: #281329;
  --color-dark-prom-queen-50: #ffefff;
  --color-dark-prom-queen-100: #f7e4f7;
  --color-dark-prom-queen-200: #e5cfe5;
  --color-dark-prom-queen-300: #d0b8d0;
  --color-dark-prom-queen-400: #b297b2;
  --color-dark-prom-queen-500: #967b96;
  --color-dark-prom-queen-600: #7a617a;
  --color-dark-prom-queen-700: #614b62;
  --color-dark-prom-queen-800: #4c384c;
  --color-dark-prom-queen-900: #3a2a3a;
  --color-dark-prom-queen-950: #281329;
  --color-wine-tasting: #4c2b3f;
  --color-wine-tasting-50: #fff0f8;
  --color-wine-tasting-100: #fde2f1;
  --color-wine-tasting-200: #edcddf;
  --color-wine-tasting-300: #d9b5c9;
  --color-wine-tasting-400: #bc95ab;
  --color-wine-tasting-500: #a17b91;
  --color-wine-tasting-600: #866177;
  --color-wine-tasting-700: #6e4d60;
  --color-wine-tasting-800: #593c4d;
  --color-wine-tasting-900: #4c2b3f;
  --color-wine-tasting-950: #2f1c27;
  --color-kenyan-copper: #6c332e;
  --color-kenyan-copper-50: #fff2f0;
  --color-kenyan-copper-100: #ffe4e1;
  --color-kenyan-copper-200: #fdc9c2;
  --color-kenyan-copper-300: #ecb1aa;
  --color-kenyan-copper-400: #d09089;
  --color-kenyan-copper-500: #b5756e;
  --color-kenyan-copper-600: #995c55;
  --color-kenyan-copper-700: #7f4741;
  --color-kenyan-copper-800: #6c332e;
  --color-kenyan-copper-900: #522824;
  --color-kenyan-copper-950: #361815;
  --color-ultrapurple-merge: #5b57b2;
  --color-ultrapurple-merge-50: #f3f4ff;
  --color-ultrapurple-merge-100: #e6e8ff;
  --color-ultrapurple-merge-200: #ced1ff;
  --color-ultrapurple-merge-300: #b2b5ff;
  --color-ultrapurple-merge-400: #9091ee;
  --color-ultrapurple-merge-500: #7573d1;
  --color-ultrapurple-merge-600: #5b57b2;
  --color-ultrapurple-merge-700: #474393;
  --color-ultrapurple-merge-800: #373378;
  --color-ultrapurple-merge-900: #2a2660;
  --color-ultrapurple-merge-950: #191640;
}

Similar palettes