Start generating

Coal Mine to Ultrapurple Merge color palette

1D0037Coal Mine300D2ADark Prom Queen28384ATotal Eclipse663181Galactic Grapevine5C569FUltrapurple Merge
Open in generator Export PNG, PDF, ASE…

About this palette

Coal Mine to Ultrapurple Merge is a 5-color dark, cool, gradient palette: #1D0037 (Coal Mine), #300D2A (Dark Prom Queen), #28384A (Total Eclipse), #663181 (Galactic Grapevine), #5C569F (Ultrapurple Merge). It mixes purple, blue tones and feels cool overall. The strongest text pairing is #1D0037 on #5C569F with a contrast ratio of 2.97:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Coal Minergb(29, 0, 55)hsl(272, 100%, 11%)
Dark Prom Queenrgb(48, 13, 42)hsl(310, 57%, 12%)
Total Eclipsergb(40, 56, 74)hsl(212, 30%, 22%)
Galactic Grapevinergb(102, 49, 129)hsl(280, 45%, 35%)
Ultrapurple Mergergb(92, 86, 159)hsl(245, 30%, 48%)

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

    • Protanopia
    • Deuteranopia
    • Tritanopia
    • Achromatopsia
    • Dog vision

    CSS variables

    /* Coal Mine to Ultrapurple Merge — https://swatchly.xyz/palette/1d0037-300d2a-28384a-663181-5c569f */
:root {
  --coal-mine: #1d0037;
  --dark-prom-queen: #300d2a;
  --total-eclipse: #28384a;
  --galactic-grapevine: #663181;
  --ultrapurple-merge: #5c569f;
}

    Tailwind CSS v4

    /* Coal Mine to Ultrapurple Merge — https://swatchly.xyz/palette/1d0037-300d2a-28384a-663181-5c569f */
@theme {
  --color-coal-mine: #1d0037;
  --color-coal-mine-50: #f7f3ff;
  --color-coal-mine-100: #efe6ff;
  --color-coal-mine-200: #e0cdff;
  --color-coal-mine-300: #cbb4ef;
  --color-coal-mine-400: #ad93d3;
  --color-coal-mine-500: #8f75b5;
  --color-coal-mine-600: #715895;
  --color-coal-mine-700: #584177;
  --color-coal-mine-800: #412e5b;
  --color-coal-mine-900: #2e1f43;
  --color-coal-mine-950: #1d0037;
  --color-dark-prom-queen: #300d2a;
  --color-dark-prom-queen-50: #fff0fb;
  --color-dark-prom-queen-100: #ffe1f7;
  --color-dark-prom-queen-200: #eecbe5;
  --color-dark-prom-queen-300: #dab3d1;
  --color-dark-prom-queen-400: #bd92b3;
  --color-dark-prom-queen-500: #a17697;
  --color-dark-prom-queen-600: #845b7b;
  --color-dark-prom-queen-700: #6b4662;
  --color-dark-prom-queen-800: #54344d;
  --color-dark-prom-queen-900: #41263b;
  --color-dark-prom-queen-950: #300d2a;
  --color-total-eclipse: #28384a;
  --color-total-eclipse-50: #eef6ff;
  --color-total-eclipse-100: #e0edfb;
  --color-total-eclipse-200: #cad9ea;
  --color-total-eclipse-300: #b2c3d6;
  --color-total-eclipse-400: #92a4b9;
  --color-total-eclipse-500: #778a9f;
  --color-total-eclipse-600: #5e7084;
  --color-total-eclipse-700: #4a5a6c;
  --color-total-eclipse-800: #394757;
  --color-total-eclipse-900: #28384a;
  --color-total-eclipse-950: #1a232d;
  --color-galactic-grapevine: #663181;
  --color-galactic-grapevine-50: #faf2ff;
  --color-galactic-grapevine-100: #f5e4ff;
  --color-galactic-grapevine-200: #eac6ff;
  --color-galactic-grapevine-300: #d8a7f4;
  --color-galactic-grapevine-400: #b983d7;
  --color-galactic-grapevine-500: #9c66ba;
  --color-galactic-grapevine-600: #7e4b9a;
  --color-galactic-grapevine-700: #663181;
  --color-galactic-grapevine-800: #4f2764;
  --color-galactic-grapevine-900: #3e1c4f;
  --color-galactic-grapevine-950: #270f34;
  --color-ultrapurple-merge: #5c569f;
  --color-ultrapurple-merge-50: #f4f4ff;
  --color-ultrapurple-merge-100: #e6e7ff;
  --color-ultrapurple-merge-200: #ceceff;
  --color-ultrapurple-merge-300: #b4b2f9;
  --color-ultrapurple-merge-400: #9390dc;
  --color-ultrapurple-merge-500: #7772be;
  --color-ultrapurple-merge-600: #5c569f;
  --color-ultrapurple-merge-700: #484382;
  --color-ultrapurple-merge-800: #383369;
  --color-ultrapurple-merge-900: #2b2654;
  --color-ultrapurple-merge-950: #1a1738;
}

    Similar palettes