Elite Teal to Marina Color Palette

About this palette

Elite Teal to Marina is a 5-color cool palette: #003732 (Elite Teal), #96444F (Red My Mind), #FFF7ED (Fatback), #74DFE8 (Cold Blue), #5F88C0 (Marina). It mixes turquoise, red, white, blue tones and feels cool overall. The strongest text pairing is #003732 on #FFF7ED with a contrast ratio of 12.42:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Elite Teal	rgb(0, 55, 50)	hsl(175, 100%, 11%)
Red My Mind	rgb(150, 68, 79)	hsl(352, 38%, 43%)
Fatback	rgb(255, 247, 237)	hsl(33, 100%, 96%)
Cold Blue	rgb(116, 223, 232)	hsl(185, 72%, 68%)
Marina	rgb(95, 136, 192)	hsl(215, 43%, 56%)

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.

Aa12.42:1 Super#003732 on #FFF7ED
Aa12.42:1 Super#FFF7ED on #003732
Aa8.45:1 Very good#003732 on #74DFE8
Aa8.45:1 Very good#74DFE8 on #003732
Aa6.11:1 Good#96444F on #FFF7ED
Aa6.11:1 Good#FFF7ED on #96444F
Aa4.16:1 Poor#96444F on #74DFE8
Aa4.16:1 Poor#74DFE8 on #96444F

Color blindness preview

CSS variables

/* Elite Teal to Marina — https://swatchly.xyz/palette/003732-96444f-fff7ed-74dfe8-5f88c0 */
:root {
  --elite-teal: #003732;
  --red-my-mind: #96444f;
  --fatback: #fff7ed;
  --cold-blue: #74dfe8;
  --marina: #5f88c0;
}

Tailwind CSS v4

/* Elite Teal to Marina — https://swatchly.xyz/palette/003732-96444f-fff7ed-74dfe8-5f88c0 */
@theme {
  --color-elite-teal: #003732;
  --color-elite-teal-50: #e0fcf8;
  --color-elite-teal-100: #d4f3ee;
  --color-elite-teal-200: #bce0db;
  --color-elite-teal-300: #a1cbc5;
  --color-elite-teal-400: #7caba5;
  --color-elite-teal-500: #5f8f89;
  --color-elite-teal-600: #45736d;
  --color-elite-teal-700: #305b56;
  --color-elite-teal-800: #214642;
  --color-elite-teal-900: #003732;
  --color-elite-teal-950: #0a201e;
  --color-red-my-mind: #96444f;
  --color-red-my-mind-50: #fff1f2;
  --color-red-my-mind-100: #ffe1e3;
  --color-red-my-mind-200: #ffc1c6;
  --color-red-my-mind-300: #f3a2a9;
  --color-red-my-mind-400: #d47e87;
  --color-red-my-mind-500: #b5606a;
  --color-red-my-mind-600: #96444f;
  --color-red-my-mind-700: #7a333d;
  --color-red-my-mind-800: #62252e;
  --color-red-my-mind-900: #4e1b23;
  --color-red-my-mind-950: #330e14;
  --color-fatback: #fff7ed;
  --color-fatback-50: #fff7ed;
  --color-fatback-100: #f2ede7;
  --color-fatback-200: #ded9d1;
  --color-fatback-300: #c8c1b9;
  --color-fatback-400: #a8a198;
  --color-fatback-500: #8d857c;
  --color-fatback-600: #716b62;
  --color-fatback-700: #5a544d;
  --color-fatback-800: #47413b;
  --color-fatback-900: #37322c;
  --color-fatback-950: #221f1b;
  --color-cold-blue: #74dfe8;
  --color-cold-blue-50: #f0feff;
  --color-cold-blue-100: #d3fcff;
  --color-cold-blue-200: #aaeff4;
  --color-cold-blue-300: #74dfe8;
  --color-cold-blue-400: #58bcc4;
  --color-cold-blue-500: #2a9ea7;
  --color-cold-blue-600: #008088;
  --color-cold-blue-700: #00656c;
  --color-cold-blue-800: #004e53;
  --color-cold-blue-900: #003b3f;
  --color-cold-blue-950: #002528;
  --color-marina: #5f88c0;
  --color-marina-50: #eff6ff;
  --color-marina-100: #dfecff;
  --color-marina-200: #bfdaff;
  --color-marina-300: #9ec4f6;
  --color-marina-400: #7ba4db;
  --color-marina-500: #5f88c0;
  --color-marina-600: #466da2;
  --color-marina-700: #325686;
  --color-marina-800: #24436d;
  --color-marina-900: #193357;
  --color-marina-950: #0c1f39;
}