Elite Teal to Taco Color Palette

About this palette

Elite Teal to Taco is a 5-color muted, warm, vintage palette: #133031 (Elite Teal), #72475F (Magician’s Cloak), #51797A (Submerged), #B984A6 (Romanov Mauve), #F5C8B5 (Taco). It mixes gray, red, turquoise, pink, orange tones and feels warm overall. The strongest text pairing is #133031 on #F5C8B5 with a contrast ratio of 9.24:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Elite Teal	rgb(19, 48, 49)	hsl(182, 44%, 13%)
Magician’s Cloak	rgb(114, 71, 95)	hsl(327, 23%, 36%)
Submerged	rgb(81, 121, 122)	hsl(181, 20%, 40%)
Romanov Mauve	rgb(185, 132, 166)	hsl(322, 27%, 62%)
Taco	rgb(245, 200, 181)	hsl(18, 76%, 84%)

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.

Aa9.24:1 Very good#133031 on #F5C8B5
Aa9.24:1 Very good#F5C8B5 on #133031
Aa4.96:1 Good#72475F on #F5C8B5
Aa4.96:1 Good#F5C8B5 on #72475F
Aa4.63:1 Good#133031 on #B984A6
Aa4.63:1 Good#B984A6 on #133031
Aa3.16:1 Poor#51797A on #F5C8B5
Aa3.16:1 Poor#F5C8B5 on #51797A

Color blindness preview

CSS variables

/* Elite Teal to Taco — https://swatchly.xyz/palette/133031-72475f-51797a-b984a6-f5c8b5 */
:root {
  --elite-teal: #133031;
  --magician-s-cloak: #72475f;
  --submerged: #51797a;
  --romanov-mauve: #b984a6;
  --taco: #f5c8b5;
}

Tailwind CSS v4

/* Elite Teal to Taco — https://swatchly.xyz/palette/133031-72475f-51797a-b984a6-f5c8b5 */
@theme {
  --color-elite-teal: #133031;
  --color-elite-teal-50: #e7f9fa;
  --color-elite-teal-100: #dcf0f0;
  --color-elite-teal-200: #c5ddde;
  --color-elite-teal-300: #acc7c8;
  --color-elite-teal-400: #88a7a7;
  --color-elite-teal-500: #6b8a8b;
  --color-elite-teal-600: #506d6e;
  --color-elite-teal-700: #3b5556;
  --color-elite-teal-800: #2a4041;
  --color-elite-teal-900: #133031;
  --color-elite-teal-950: #0f1b1c;
  --color-magician-s-cloak: #72475f;
  --color-magician-s-cloak-50: #fff0f8;
  --color-magician-s-cloak-100: #ffe2f1;
  --color-magician-s-cloak-200: #f1cbdf;
  --color-magician-s-cloak-300: #deb3ca;
  --color-magician-s-cloak-400: #c192ab;
  --color-magician-s-cloak-500: #a67790;
  --color-magician-s-cloak-600: #8a5d76;
  --color-magician-s-cloak-700: #72475f;
  --color-magician-s-cloak-800: #5a374a;
  --color-magician-s-cloak-900: #462939;
  --color-magician-s-cloak-950: #2d1824;
  --color-submerged: #51797a;
  --color-submerged-50: #e3fbfb;
  --color-submerged-100: #d8f2f3;
  --color-submerged-200: #c1e0e1;
  --color-submerged-300: #a8cccc;
  --color-submerged-400: #86aeae;
  --color-submerged-500: #6b9394;
  --color-submerged-600: #51797a;
  --color-submerged-700: #3c6162;
  --color-submerged-800: #2b4c4d;
  --color-submerged-900: #1f3a3b;
  --color-submerged-950: #102425;
  --color-romanov-mauve: #b984a6;
  --color-romanov-mauve-50: #ffebf7;
  --color-romanov-mauve-100: #ffd9f0;
  --color-romanov-mauve-200: #edc1dd;
  --color-romanov-mauve-300: #d8a7c6;
  --color-romanov-mauve-400: #b984a6;
  --color-romanov-mauve-500: #9e6b8c;
  --color-romanov-mauve-600: #835373;
  --color-romanov-mauve-700: #6b405d;
  --color-romanov-mauve-800: #56314a;
  --color-romanov-mauve-900: #45253a;
  --color-romanov-mauve-950: #2d1626;
  --color-taco: #f5c8b5;
  --color-taco-50: #ffeee7;
  --color-taco-100: #fee0d4;
  --color-taco-200: #f5c8b5;
  --color-taco-300: #dab4a4;
  --color-taco-400: #bd9483;
  --color-taco-500: #a27968;
  --color-taco-600: #876050;
  --color-taco-700: #6e4b3c;
  --color-taco-800: #583a2d;
  --color-taco-900: #452c21;
  --color-taco-950: #2c1a12;
}