Midnight Edition to Seven Seas Color Palette

About this palette

Midnight Edition to Seven Seas is a 4-color dark, cool, monochromatic, gradient palette: #00141F (Midnight Edition), #002C36 (Black Box), #10465F (Capital Blue), #465F70 (Seven Seas). It mixes black, blue tones and feels cool overall. The strongest text pairing is #00141F on #465F70 with a contrast ratio of 2.80:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Midnight Edition	rgb(0, 20, 31)	hsl(201, 100%, 6%)
Black Box	rgb(0, 44, 54)	hsl(191, 100%, 11%)
Capital Blue	rgb(16, 70, 95)	hsl(199, 71%, 22%)
Seven Seas	rgb(70, 95, 112)	hsl(204, 23%, 36%)

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 Seven Seas — https://swatchly.xyz/palette/00141f-002c36-10465f-465f70 */
:root {
  --midnight-edition: #00141f;
  --black-box: #002c36;
  --capital-blue: #10465f;
  --seven-seas: #465f70;
}

Tailwind CSS v4

/* Midnight Edition to Seven Seas — https://swatchly.xyz/palette/00141f-002c36-10465f-465f70 */
@theme {
  --color-midnight-edition: #00141f;
  --color-midnight-edition-50: #eaf7ff;
  --color-midnight-edition-100: #ddeef8;
  --color-midnight-edition-200: #c7dbe7;
  --color-midnight-edition-300: #aec5d2;
  --color-midnight-edition-400: #8ca6b4;
  --color-midnight-edition-500: #6e8796;
  --color-midnight-edition-600: #526a77;
  --color-midnight-edition-700: #3b505c;
  --color-midnight-edition-800: #293b44;
  --color-midnight-edition-900: #1b2930;
  --color-midnight-edition-950: #00141f;
  --color-black-box: #002c36;
  --color-black-box-50: #e6f9ff;
  --color-black-box-100: #d6f1f9;
  --color-black-box-200: #bedee7;
  --color-black-box-300: #a4c8d3;
  --color-black-box-400: #81a9b5;
  --color-black-box-500: #668f9b;
  --color-black-box-600: #4e7681;
  --color-black-box-700: #3b606a;
  --color-black-box-800: #2c4d57;
  --color-black-box-900: #213e46;
  --color-black-box-950: #002c36;
  --color-capital-blue: #10465f;
  --color-capital-blue-50: #ebf7ff;
  --color-capital-blue-100: #d6f0ff;
  --color-capital-blue-200: #b7def4;
  --color-capital-blue-300: #9bc8e1;
  --color-capital-blue-400: #77a8c4;
  --color-capital-blue-500: #5a8ca8;
  --color-capital-blue-600: #40718b;
  --color-capital-blue-700: #2c5971;
  --color-capital-blue-800: #10465f;
  --color-capital-blue-900: #133547;
  --color-capital-blue-950: #08212d;
  --color-seven-seas: #465f70;
  --color-seven-seas-50: #ecf7ff;
  --color-seven-seas-100: #dceefb;
  --color-seven-seas-200: #c7dceb;
  --color-seven-seas-300: #b0c7d7;
  --color-seven-seas-400: #8fa9bb;
  --color-seven-seas-500: #748fa1;
  --color-seven-seas-600: #5b7586;
  --color-seven-seas-700: #465f70;
  --color-seven-seas-800: #354a58;
  --color-seven-seas-900: #273945;
  --color-seven-seas-950: #17242c;
}