Elite Teal to Silent Orbit Color Palette

About this palette

Elite Teal to Silent Orbit is a 5-color dark, cool palette: #003632 (Elite Teal), #006671 (Wakame Green), #464058 (Madonna), #04091A (Narwhal Grey), #251853 (Silent Orbit). It mixes turquoise, purple, black tones and feels cool overall. The strongest text pairing is #006671 on #04091A with a contrast ratio of 2.96:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Elite Teal	rgb(0, 54, 50)	hsl(176, 100%, 11%)
Wakame Green	rgb(0, 102, 113)	hsl(186, 100%, 22%)
Madonna	rgb(70, 64, 88)	hsl(255, 16%, 30%)
Narwhal Grey	rgb(4, 9, 26)	hsl(226, 73%, 6%)
Silent Orbit	rgb(37, 24, 83)	hsl(253, 55%, 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

/* Elite Teal to Silent Orbit — https://swatchly.xyz/palette/003632-006671-464058-04091a-251853 */
:root {
  --elite-teal: #003632;
  --wakame-green: #006671;
  --madonna: #464058;
  --narwhal-grey: #04091a;
  --silent-orbit: #251853;
}

Tailwind CSS v4

/* Elite Teal to Silent Orbit — https://swatchly.xyz/palette/003632-006671-464058-04091a-251853 */
@theme {
  --color-elite-teal: #003632;
  --color-elite-teal-50: #e1fcf8;
  --color-elite-teal-100: #d4f3ef;
  --color-elite-teal-200: #bce0dc;
  --color-elite-teal-300: #a1cbc6;
  --color-elite-teal-400: #7daba5;
  --color-elite-teal-500: #5f8f89;
  --color-elite-teal-600: #45736e;
  --color-elite-teal-700: #305a56;
  --color-elite-teal-800: #214542;
  --color-elite-teal-900: #003632;
  --color-elite-teal-950: #0a201d;
  --color-wakame-green: #006671;
  --color-wakame-green-50: #e0fbff;
  --color-wakame-green-100: #c6f5fc;
  --color-wakame-green-200: #abe4ed;
  --color-wakame-green-300: #8ed0d9;
  --color-wakame-green-400: #67b2bd;
  --color-wakame-green-500: #4797a2;
  --color-wakame-green-600: #2a7d88;
  --color-wakame-green-700: #006671;
  --color-wakame-green-800: #005059;
  --color-wakame-green-900: #003e45;
  --color-wakame-green-950: #00272c;
  --color-madonna: #464058;
  --color-madonna-50: #f6f3ff;
  --color-madonna-100: #ece8fb;
  --color-madonna-200: #d9d4ea;
  --color-madonna-300: #c3bdd6;
  --color-madonna-400: #a49eb9;
  --color-madonna-500: #89839e;
  --color-madonna-600: #6f6982;
  --color-madonna-700: #59536a;
  --color-madonna-800: #464058;
  --color-madonna-900: #363143;
  --color-madonna-950: #211e2b;
  --color-narwhal-grey: #04091a;
  --color-narwhal-grey-50: #f1f5ff;
  --color-narwhal-grey-100: #e4ebfc;
  --color-narwhal-grey-200: #cfd8eb;
  --color-narwhal-grey-300: #b7c1d7;
  --color-narwhal-grey-400: #97a2b9;
  --color-narwhal-grey-500: #778199;
  --color-narwhal-grey-600: #596379;
  --color-narwhal-grey-700: #40485b;
  --color-narwhal-grey-800: #2b3241;
  --color-narwhal-grey-900: #1a1f2a;
  --color-narwhal-grey-950: #04091a;
  --color-silent-orbit: #251853;
  --color-silent-orbit-50: #f4f4ff;
  --color-silent-orbit-100: #e9e9ff;
  --color-silent-orbit-200: #d4d2ff;
  --color-silent-orbit-300: #bdb9f7;
  --color-silent-orbit-400: #9e98dc;
  --color-silent-orbit-500: #847dc2;
  --color-silent-orbit-600: #6b64a5;
  --color-silent-orbit-700: #564f8b;
  --color-silent-orbit-800: #453e73;
  --color-silent-orbit-900: #37305f;
  --color-silent-orbit-950: #251853;
}