Elite Teal to Tutu Color Palette

About this palette

Elite Teal to Tutu is a 4-color palette: #003237 (Elite Teal), #006C6F (Aqua Obscura), #E98174 (Melondrama), #FFE3E1 (Tutu). It mixes turquoise, red, white tones and feels cool overall. The strongest text pairing is #003237 on #FFE3E1 with a contrast ratio of 11.46:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Elite Teal	rgb(0, 50, 55)	hsl(185, 100%, 11%)
Aqua Obscura	rgb(0, 108, 111)	hsl(182, 100%, 22%)
Melondrama	rgb(233, 129, 116)	hsl(7, 73%, 68%)
Tutu	rgb(255, 227, 225)	hsl(4, 100%, 94%)

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.

Aa11.46:1 Very good#003237 on #FFE3E1
Aa11.46:1 Very good#FFE3E1 on #003237
Aa5.20:1 Good#003237 on #E98174
Aa5.20:1 Good#E98174 on #003237
Aa5.13:1 Good#006C6F on #FFE3E1
Aa5.13:1 Good#FFE3E1 on #006C6F

Color blindness preview

CSS variables

/* Elite Teal to Tutu — https://swatchly.xyz/palette/003237-006c6f-e98174-ffe3e1 */
:root {
  --elite-teal: #003237;
  --aqua-obscura: #006c6f;
  --melondrama: #e98174;
  --tutu: #ffe3e1;
}

Tailwind CSS v4

/* Elite Teal to Tutu — https://swatchly.xyz/palette/003237-006c6f-e98174-ffe3e1 */
@theme {
  --color-elite-teal: #003237;
  --color-elite-teal-50: #e1fbfe;
  --color-elite-teal-100: #d5f2f5;
  --color-elite-teal-200: #bddfe3;
  --color-elite-teal-300: #a2c9ce;
  --color-elite-teal-400: #7da9ae;
  --color-elite-teal-500: #5f8c91;
  --color-elite-teal-600: #457075;
  --color-elite-teal-700: #30575c;
  --color-elite-teal-800: #204246;
  --color-elite-teal-900: #003237;
  --color-elite-teal-950: #0a1d1f;
  --color-aqua-obscura: #006c6f;
  --color-aqua-obscura-50: #d7feff;
  --color-aqua-obscura-100: #c4f6f7;
  --color-aqua-obscura-200: #abe6e8;
  --color-aqua-obscura-300: #8ed3d4;
  --color-aqua-obscura-400: #67b6b8;
  --color-aqua-obscura-500: #479c9f;
  --color-aqua-obscura-600: #2a8285;
  --color-aqua-obscura-700: #006c6f;
  --color-aqua-obscura-800: #005557;
  --color-aqua-obscura-900: #004143;
  --color-aqua-obscura-950: #00292b;
  --color-melondrama: #e98174;
  --color-melondrama-50: #fff2f0;
  --color-melondrama-100: #ffe5e1;
  --color-melondrama-200: #ffcac2;
  --color-melondrama-300: #ffa89c;
  --color-melondrama-400: #e98174;
  --color-melondrama-500: #ca6559;
  --color-melondrama-600: #aa4a40;
  --color-melondrama-700: #8d352d;
  --color-melondrama-800: #72251f;
  --color-melondrama-900: #5b1914;
  --color-melondrama-950: #3b0c09;
  --color-tutu: #ffe3e1;
  --color-tutu-50: #fff1f0;
  --color-tutu-100: #ffe3e1;
  --color-tutu-200: #e6d1d0;
  --color-tutu-300: #d1bab9;
  --color-tutu-400: #b39a99;
  --color-tutu-500: #987f7d;
  --color-tutu-600: #7d6564;
  --color-tutu-700: #644f4e;
  --color-tutu-800: #503d3c;
  --color-tutu-900: #3e2e2d;
  --color-tutu-950: #271c1b;
}