Midnight Edition to Aqua Obscura Color Palette

About this palette

Midnight Edition to Aqua Obscura is a 5-color dark, cool, gradient palette: #00161A (Midnight Edition), #00292B (Black Box), #003D3B (Rich Black), #3E4C71 (Noble Knight), #006B6C (Aqua Obscura). It mixes black, turquoise, blue tones and feels cool overall. The strongest text pairing is #00161A on #006B6C with a contrast ratio of 2.94:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Midnight Edition	rgb(0, 22, 26)	hsl(189, 100%, 5%)
Black Box	rgb(0, 41, 43)	hsl(183, 100%, 8%)
Rich Black	rgb(0, 61, 59)	hsl(178, 100%, 12%)
Noble Knight	rgb(62, 76, 113)	hsl(224, 29%, 34%)
Aqua Obscura	rgb(0, 107, 108)	hsl(181, 100%, 21%)

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 Aqua Obscura — https://swatchly.xyz/palette/00161a-00292b-003d3b-3e4c71-006b6c */
:root {
  --midnight-edition: #00161a;
  --black-box: #00292b;
  --rich-black: #003d3b;
  --noble-knight: #3e4c71;
  --aqua-obscura: #006b6c;
}

Tailwind CSS v4

/* Midnight Edition to Aqua Obscura — https://swatchly.xyz/palette/00161a-00292b-003d3b-3e4c71-006b6c */
@theme {
  --color-midnight-edition: #00161a;
  --color-midnight-edition-50: #e9f9fc;
  --color-midnight-edition-100: #ddeff2;
  --color-midnight-edition-200: #c7dce0;
  --color-midnight-edition-300: #aec6cb;
  --color-midnight-edition-400: #8ca7ac;
  --color-midnight-edition-500: #6e898e;
  --color-midnight-edition-600: #526c70;
  --color-midnight-edition-700: #3b5256;
  --color-midnight-edition-800: #293c40;
  --color-midnight-edition-900: #1b2a2d;
  --color-midnight-edition-950: #00161a;
  --color-black-box: #00292b;
  --color-black-box-50: #e4fafb;
  --color-black-box-100: #d8f1f2;
  --color-black-box-200: #c0dee0;
  --color-black-box-300: #a6c9ca;
  --color-black-box-400: #83aaac;
  --color-black-box-500: #688f91;
  --color-black-box-600: #4f7577;
  --color-black-box-700: #3b5e60;
  --color-black-box-800: #2c4b4d;
  --color-black-box-900: #203b3d;
  --color-black-box-950: #00292b;
  --color-rich-black: #003d3b;
  --color-rich-black-50: #dffcfa;
  --color-rich-black-100: #d2f3f1;
  --color-rich-black-200: #b9e1de;
  --color-rich-black-300: #9ecbc8;
  --color-rich-black-400: #7aadaa;
  --color-rich-black-500: #5e928f;
  --color-rich-black-600: #447774;
  --color-rich-black-700: #30605d;
  --color-rich-black-800: #214c4a;
  --color-rich-black-900: #003d3b;
  --color-rich-black-950: #0a2524;
  --color-noble-knight: #3e4c71;
  --color-noble-knight-50: #f1f5ff;
  --color-noble-knight-100: #e3ebff;
  --color-noble-knight-200: #c8d6f7;
  --color-noble-knight-300: #aebde3;
  --color-noble-knight-400: #8c9cc5;
  --color-noble-knight-500: #7080a8;
  --color-noble-knight-600: #556489;
  --color-noble-knight-700: #3e4c71;
  --color-noble-knight-800: #303b58;
  --color-noble-knight-900: #242d45;
  --color-noble-knight-950: #151b2c;
  --color-aqua-obscura: #006b6c;
  --color-aqua-obscura-50: #d4ffff;
  --color-aqua-obscura-100: #c5f6f6;
  --color-aqua-obscura-200: #abe6e6;
  --color-aqua-obscura-300: #8ed2d2;
  --color-aqua-obscura-400: #67b5b6;
  --color-aqua-obscura-500: #479b9c;
  --color-aqua-obscura-600: #2a8182;
  --color-aqua-obscura-700: #006b6c;
  --color-aqua-obscura-800: #005455;
  --color-aqua-obscura-900: #004141;
  --color-aqua-obscura-950: #002929;
}