Dark & Stormy to Midnight Dreams color palette

363B4EDark & Stormy 004D78Sea Paint 060237Oblivion 3E697EStellar 26203DMidnight Velvet 00202EMidnight Dreams

Open in generator Export PNG, PDF, ASE…

About this palette

Dark & Stormy to Midnight Dreams is a 6-color dark, cool palette: #363B4E (Dark & Stormy), #004D78 (Sea Paint), #060237 (Oblivion), #3E697E (Stellar), #26203D (Midnight Velvet), #00202E (Midnight Dreams). It mixes gray, blue, purple tones and feels cool overall. The strongest text pairing is #060237 on #3E697E with a contrast ratio of 3.29:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Dark & Stormy	rgb(54, 59, 78)	hsl(228, 18%, 26%)
Sea Paint	rgb(0, 77, 120)	hsl(202, 100%, 24%)
Oblivion	rgb(6, 2, 55)	hsl(245, 93%, 11%)
Stellar	rgb(62, 105, 126)	hsl(200, 34%, 37%)
Midnight Velvet	rgb(38, 32, 61)	hsl(252, 31%, 18%)
Midnight Dreams	rgb(0, 32, 46)	hsl(198, 100%, 9%)

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.29:1 Poor#060237 on #3E697E
Aa3.29:1 Poor#3E697E on #060237

Color blindness preview

CSS variables

/* Dark & Stormy to Midnight Dreams — https://swatchly.xyz/palette/363b4e-004d78-060237-3e697e-26203d-00202e */
:root {
  --dark-stormy: #363b4e;
  --sea-paint: #004d78;
  --oblivion: #060237;
  --stellar: #3e697e;
  --midnight-velvet: #26203d;
  --midnight-dreams: #00202e;
}

Tailwind CSS v4

/* Dark & Stormy to Midnight Dreams — https://swatchly.xyz/palette/363b4e-004d78-060237-3e697e-26203d-00202e */
@theme {
  --color-dark-stormy: #363b4e;
  --color-dark-stormy-50: #f2f5ff;
  --color-dark-stormy-100: #e6ebfa;
  --color-dark-stormy-200: #d2d7e9;
  --color-dark-stormy-300: #b9bfd3;
  --color-dark-stormy-400: #989eb4;
  --color-dark-stormy-500: #7c8297;
  --color-dark-stormy-600: #61667b;
  --color-dark-stormy-700: #4a4f61;
  --color-dark-stormy-800: #363b4e;
  --color-dark-stormy-900: #2a2d3a;
  --color-dark-stormy-950: #191b24;
  --color-sea-paint: #004d78;
  --color-sea-paint-50: #edf7ff;
  --color-sea-paint-100: #daeeff;
  --color-sea-paint-200: #b3ddff;
  --color-sea-paint-300: #93c9f3;
  --color-sea-paint-400: #6fabd9;
  --color-sea-paint-500: #5190bf;
  --color-sea-paint-600: #3776a3;
  --color-sea-paint-700: #236089;
  --color-sea-paint-800: #004d78;
  --color-sea-paint-900: #093b5b;
  --color-sea-paint-950: #02253d;
  --color-oblivion: #060237;
  --color-oblivion-50: #f2f5ff;
  --color-oblivion-100: #e4eaff;
  --color-oblivion-200: #cad6ff;
  --color-oblivion-300: #aebef8;
  --color-oblivion-400: #8e9edd;
  --color-oblivion-500: #6f7ebd;
  --color-oblivion-600: #53609b;
  --color-oblivion-700: #3b477a;
  --color-oblivion-800: #29315b;
  --color-oblivion-900: #1a2040;
  --color-oblivion-950: #060237;
  --color-stellar: #3e697e;
  --color-stellar-50: #eaf8ff;
  --color-stellar-100: #d2effe;
  --color-stellar-200: #b7daec;
  --color-stellar-300: #9bc3d7;
  --color-stellar-400: #77a2b8;
  --color-stellar-500: #59859b;
  --color-stellar-600: #3e697e;
  --color-stellar-700: #2e5365;
  --color-stellar-800: #204151;
  --color-stellar-900: #173340;
  --color-stellar-950: #0b1f29;
  --color-midnight-velvet: #26203d;
  --color-midnight-velvet-50: #f5f3ff;
  --color-midnight-velvet-100: #ebe8ff;
  --color-midnight-velvet-200: #d7d3f0;
  --color-midnight-velvet-300: #c1bcdd;
  --color-midnight-velvet-400: #a29cc0;
  --color-midnight-velvet-500: #8882a6;
  --color-midnight-velvet-600: #6e698b;
  --color-midnight-velvet-700: #595473;
  --color-midnight-velvet-800: #47425e;
  --color-midnight-velvet-900: #38344c;
  --color-midnight-velvet-950: #26203d;
  --color-midnight-dreams: #00202e;
  --color-midnight-dreams-50: #eaf8ff;
  --color-midnight-dreams-100: #d9effb;
  --color-midnight-dreams-200: #c2dcea;
  --color-midnight-dreams-300: #a8c6d6;
  --color-midnight-dreams-400: #86a7b8;
  --color-midnight-dreams-500: #6a8b9d;
  --color-midnight-dreams-600: #507080;
  --color-midnight-dreams-700: #3b5867;
  --color-midnight-dreams-800: #2b4451;
  --color-midnight-dreams-900: #1e343e;
  --color-midnight-dreams-950: #00202e;
}