Midnight Edition to Atlantis color palette

00131CMidnight Edition 201136Midnight Monarch 391F53Stormy Night 213F45Sunken Harbour 463185Majestic Eggplant 2B6172Atlantis

Open in generator Export PNG, PDF, ASE…

About this palette

Midnight Edition to Atlantis is a 6-color dark, cool, gradient palette: #00131C (Midnight Edition), #201136 (Midnight Monarch), #391F53 (Stormy Night), #213F45 (Sunken Harbour), #463185 (Majestic Eggplant), #2B6172 (Atlantis). It mixes black, purple, turquoise, blue tones and feels cool overall. The strongest text pairing is #00131C on #2B6172 with a contrast ratio of 2.75:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Midnight Edition	rgb(0, 19, 28)	hsl(199, 100%, 5%)
Midnight Monarch	rgb(32, 17, 54)	hsl(264, 52%, 14%)
Stormy Night	rgb(57, 31, 83)	hsl(270, 46%, 22%)
Sunken Harbour	rgb(33, 63, 69)	hsl(190, 35%, 20%)
Majestic Eggplant	rgb(70, 49, 133)	hsl(255, 46%, 36%)
Atlantis	rgb(43, 97, 114)	hsl(194, 45%, 31%)

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 Atlantis — https://swatchly.xyz/palette/00131c-201136-391f53-213f45-463185-2b6172 */
:root {
  --midnight-edition: #00131c;
  --midnight-monarch: #201136;
  --stormy-night: #391f53;
  --sunken-harbour: #213f45;
  --majestic-eggplant: #463185;
  --atlantis: #2b6172;
}

Tailwind CSS v4

/* Midnight Edition to Atlantis — https://swatchly.xyz/palette/00131c-201136-391f53-213f45-463185-2b6172 */
@theme {
  --color-midnight-edition: #00131c;
  --color-midnight-edition-50: #e9f8ff;
  --color-midnight-edition-100: #ddeef6;
  --color-midnight-edition-200: #c7dbe5;
  --color-midnight-edition-300: #aec5d0;
  --color-midnight-edition-400: #8da6b2;
  --color-midnight-edition-500: #6e8793;
  --color-midnight-edition-600: #526a75;
  --color-midnight-edition-700: #3b5059;
  --color-midnight-edition-800: #293a42;
  --color-midnight-edition-900: #1a272e;
  --color-midnight-edition-950: #00131c;
  --color-midnight-monarch: #201136;
  --color-midnight-monarch-50: #f6f3ff;
  --color-midnight-monarch-100: #eee7ff;
  --color-midnight-monarch-200: #dcd1f6;
  --color-midnight-monarch-300: #c6b9e3;
  --color-midnight-monarch-400: #a799c6;
  --color-midnight-monarch-500: #8b7caa;
  --color-midnight-monarch-600: #6f618c;
  --color-midnight-monarch-700: #584b71;
  --color-midnight-monarch-800: #433859;
  --color-midnight-monarch-900: #322944;
  --color-midnight-monarch-950: #201136;
  --color-stormy-night: #391f53;
  --color-stormy-night-50: #f8f2ff;
  --color-stormy-night-100: #f0e6ff;
  --color-stormy-night-200: #e1cdfd;
  --color-stormy-night-300: #ccb5eb;
  --color-stormy-night-400: #ad93ce;
  --color-stormy-night-500: #9176b1;
  --color-stormy-night-600: #755b93;
  --color-stormy-night-700: #5c4577;
  --color-stormy-night-800: #47335e;
  --color-stormy-night-900: #391f53;
  --color-stormy-night-950: #21152e;
  --color-sunken-harbour: #213f45;
  --color-sunken-harbour-50: #e6f9fd;
  --color-sunken-harbour-100: #dbf0f4;
  --color-sunken-harbour-200: #c4dde2;
  --color-sunken-harbour-300: #aac7cd;
  --color-sunken-harbour-400: #8aa9b0;
  --color-sunken-harbour-500: #6f8f96;
  --color-sunken-harbour-600: #57767c;
  --color-sunken-harbour-700: #436066;
  --color-sunken-harbour-800: #334d53;
  --color-sunken-harbour-900: #213f45;
  --color-sunken-harbour-950: #17282b;
  --color-majestic-eggplant: #463185;
  --color-majestic-eggplant-50: #f5f4ff;
  --color-majestic-eggplant-100: #eae8ff;
  --color-majestic-eggplant-200: #d6d1ff;
  --color-majestic-eggplant-300: #c0b6ff;
  --color-majestic-eggplant-400: #a293ed;
  --color-majestic-eggplant-500: #8777d2;
  --color-majestic-eggplant-600: #6e5db3;
  --color-majestic-eggplant-700: #584796;
  --color-majestic-eggplant-800: #463185;
  --color-majestic-eggplant-900: #352863;
  --color-majestic-eggplant-950: #211742;
  --color-atlantis: #2b6172;
  --color-atlantis-50: #e7f9ff;
  --color-atlantis-100: #d0f2fe;
  --color-atlantis-200: #b8e0ee;
  --color-atlantis-300: #9dcbdb;
  --color-atlantis-400: #79adbe;
  --color-atlantis-500: #5c92a4;
  --color-atlantis-600: #437789;
  --color-atlantis-700: #2b6172;
  --color-atlantis-800: #1f4c5a;
  --color-atlantis-900: #143b46;
  --color-atlantis-950: #08252d;
}