Elite Teal to Chocolate Magma color palette

0A3637Elite Teal E79B96She Loves Pink FFF6F4Sugar Milk 00A4ADSilken Jade 78453CChocolate Magma

About this palette

Elite Teal to Chocolate Magma is a 5-color vintage palette: #0A3637 (Elite Teal), #E79B96 (She Loves Pink), #FFF6F4 (Sugar Milk), #00A4AD (Silken Jade), #78453C (Chocolate Magma). It mixes turquoise, red, white tones and feels balanced overall. The strongest text pairing is #0A3637 on #FFF6F4 with a contrast ratio of 12.37:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Elite Teal	rgb(10, 54, 55)	hsl(181, 69%, 13%)
She Loves Pink	rgb(231, 155, 150)	hsl(4, 63%, 75%)
Sugar Milk	rgb(255, 246, 244)	hsl(11, 100%, 98%)
Silken Jade	rgb(0, 164, 173)	hsl(183, 100%, 34%)
Chocolate Magma	rgb(120, 69, 60)	hsl(9, 33%, 35%)

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.37:1 Super#0A3637 on #FFF6F4
Aa12.37:1 Super#FFF6F4 on #0A3637
Aa7.27:1 Very good#FFF6F4 on #78453C
Aa7.27:1 Very good#78453C on #FFF6F4
Aa5.97:1 Good#0A3637 on #E79B96
Aa5.97:1 Good#E79B96 on #0A3637
Aa4.33:1 Poor#0A3637 on #00A4AD
Aa4.33:1 Poor#00A4AD on #0A3637

Color blindness preview

CSS variables

/* Elite Teal to Chocolate Magma — https://swatchly.xyz/palette/0a3637-e79b96-fff6f4-00a4ad-78453c */
:root {
  --elite-teal: #0a3637;
  --she-loves-pink: #e79b96;
  --sugar-milk: #fff6f4;
  --silken-jade: #00a4ad;
  --chocolate-magma: #78453c;
}

Tailwind CSS v4

/* Elite Teal to Chocolate Magma — https://swatchly.xyz/palette/0a3637-e79b96-fff6f4-00a4ad-78453c */
@theme {
  --color-elite-teal: #0a3637;
  --color-elite-teal-50: #e3fbfb;
  --color-elite-teal-100: #d6f1f2;
  --color-elite-teal-200: #bfdfdf;
  --color-elite-teal-300: #a4c9ca;
  --color-elite-teal-400: #81aaaa;
  --color-elite-teal-500: #648e8e;
  --color-elite-teal-600: #4a7273;
  --color-elite-teal-700: #355a5b;
  --color-elite-teal-800: #254546;
  --color-elite-teal-900: #0a3637;
  --color-elite-teal-950: #0d2020;
  --color-she-loves-pink: #e79b96;
  --color-she-loves-pink-50: #ffe7e5;
  --color-she-loves-pink-100: #ffd5d2;
  --color-she-loves-pink-200: #f8b8b4;
  --color-she-loves-pink-300: #e79b96;
  --color-she-loves-pink-400: #c77f7b;
  --color-she-loves-pink-500: #ad6662;
  --color-she-loves-pink-600: #914f4c;
  --color-she-loves-pink-700: #783d3a;
  --color-she-loves-pink-800: #632e2c;
  --color-she-loves-pink-900: #502322;
  --color-she-loves-pink-950: #341413;
  --color-sugar-milk: #fff6f4;
  --color-sugar-milk-50: #fff6f4;
  --color-sugar-milk-100: #f2eceb;
  --color-sugar-milk-200: #ded8d6;
  --color-sugar-milk-300: #c8c0bf;
  --color-sugar-milk-400: #a8a09f;
  --color-sugar-milk-500: #8d8583;
  --color-sugar-milk-600: #716a68;
  --color-sugar-milk-700: #5a5352;
  --color-sugar-milk-800: #47413f;
  --color-sugar-milk-900: #363230;
  --color-sugar-milk-950: #221e1d;
  --color-silken-jade: #00a4ad;
  --color-silken-jade-50: #e2fdff;
  --color-silken-jade-100: #c3fbff;
  --color-silken-jade-200: #9dedf3;
  --color-silken-jade-300: #7adae1;
  --color-silken-jade-400: #48bec6;
  --color-silken-jade-500: #00a4ad;
  --color-silken-jade-600: #00848b;
  --color-silken-jade-700: #00696f;
  --color-silken-jade-800: #005156;
  --color-silken-jade-900: #003e42;
  --color-silken-jade-950: #002629;
  --color-chocolate-magma: #78453c;
  --color-chocolate-magma-50: #fff2ef;
  --color-chocolate-magma-100: #ffe4df;
  --color-chocolate-magma-200: #f9cbc2;
  --color-chocolate-magma-300: #e6b3a9;
  --color-chocolate-magma-400: #c99287;
  --color-chocolate-magma-500: #ad766b;
  --color-chocolate-magma-600: #905c52;
  --color-chocolate-magma-700: #78453c;
  --color-chocolate-magma-800: #5e352e;
  --color-chocolate-magma-900: #4a2822;
  --color-chocolate-magma-950: #301713;
}