Elite Teal to Midnight Edition Color Palette

About this palette

Elite Teal to Midnight Edition is a 4-color dark, cool, monochromatic palette: #003132 (Elite Teal), #006E73 (Pine Scented Lagoon), #004255 (Maniac Mansion), #001118 (Midnight Edition). It mixes turquoise, blue, black tones and feels cool overall. The strongest text pairing is #006E73 on #001118 with a contrast ratio of 3.18:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Elite Teal	rgb(0, 49, 50)	hsl(181, 100%, 10%)
Pine Scented Lagoon	rgb(0, 110, 115)	hsl(183, 100%, 23%)
Maniac Mansion	rgb(0, 66, 85)	hsl(193, 100%, 17%)
Midnight Edition	rgb(0, 17, 24)	hsl(198, 100%, 5%)

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.18:1 Poor#006E73 on #001118
Aa3.18:1 Poor#001118 on #006E73

Color blindness preview

CSS variables

/* Elite Teal to Midnight Edition — https://swatchly.xyz/palette/003132-006e73-004255-001118 */
:root {
  --elite-teal: #003132;
  --pine-scented-lagoon: #006e73;
  --maniac-mansion: #004255;
  --midnight-edition: #001118;
}

Tailwind CSS v4

/* Elite Teal to Midnight Edition — https://swatchly.xyz/palette/003132-006e73-004255-001118 */
@theme {
  --color-elite-teal: #003132;
  --color-elite-teal-50: #e2fbfb;
  --color-elite-teal-100: #d5f2f2;
  --color-elite-teal-200: #bddfdf;
  --color-elite-teal-300: #a3caca;
  --color-elite-teal-400: #7ea9aa;
  --color-elite-teal-500: #608c8c;
  --color-elite-teal-600: #456f70;
  --color-elite-teal-700: #305657;
  --color-elite-teal-800: #204141;
  --color-elite-teal-900: #003132;
  --color-elite-teal-950: #0a1c1c;
  --color-pine-scented-lagoon: #006e73;
  --color-pine-scented-lagoon-50: #dafdff;
  --color-pine-scented-lagoon-100: #c4f6f9;
  --color-pine-scented-lagoon-200: #abe6ea;
  --color-pine-scented-lagoon-300: #8ed3d7;
  --color-pine-scented-lagoon-400: #67b7bb;
  --color-pine-scented-lagoon-500: #479da2;
  --color-pine-scented-lagoon-600: #298489;
  --color-pine-scented-lagoon-700: #006e73;
  --color-pine-scented-lagoon-800: #00565a;
  --color-pine-scented-lagoon-900: #004246;
  --color-pine-scented-lagoon-950: #002a2c;
  --color-maniac-mansion: #004255;
  --color-maniac-mansion-50: #e8f8ff;
  --color-maniac-mansion-100: #d1f1ff;
  --color-maniac-mansion-200: #b6dff0;
  --color-maniac-mansion-300: #98c8db;
  --color-maniac-mansion-400: #72a8bd;
  --color-maniac-mansion-500: #548ba0;
  --color-maniac-mansion-600: #396f82;
  --color-maniac-mansion-700: #255668;
  --color-maniac-mansion-800: #004255;
  --color-maniac-mansion-900: #0d323e;
  --color-maniac-mansion-950: #051e27;
  --color-midnight-edition: #001118;
  --color-midnight-edition-50: #eaf8fe;
  --color-midnight-edition-100: #deeef5;
  --color-midnight-edition-200: #c8dbe3;
  --color-midnight-edition-300: #b0c5ce;
  --color-midnight-edition-400: #8ea6af;
  --color-midnight-edition-500: #6f8790;
  --color-midnight-edition-600: #526971;
  --color-midnight-edition-700: #3b4f56;
  --color-midnight-edition-800: #28383e;
  --color-midnight-edition-900: #19262a;
  --color-midnight-edition-950: #001118;
}