Swan Lake to Elite Teal color palette

C8E2DASwan Lake BA8F93Rosy Brown 916C79Fruit of Passion 2A5351Hunter 1D322DElite Teal

About this palette

Swan Lake to Elite Teal is a 5-color muted, vintage palette: #C8E2DA (Swan Lake), #BA8F93 (Rosy Brown), #916C79 (Fruit of Passion), #2A5351 (Hunter), #1D322D (Elite Teal). It mixes gray, red, turquoise tones and feels warm overall. The strongest text pairing is #C8E2DA on #1D322D with a contrast ratio of 9.92:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Swan Lake	rgb(200, 226, 218)	hsl(162, 31%, 84%)
Rosy Brown	rgb(186, 143, 147)	hsl(354, 24%, 65%)
Fruit of Passion	rgb(145, 108, 121)	hsl(339, 15%, 50%)
Hunter	rgb(42, 83, 81)	hsl(177, 33%, 25%)
Elite Teal	rgb(29, 50, 45)	hsl(166, 27%, 15%)

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.92:1 Very good#C8E2DA on #1D322D
Aa9.92:1 Very good#1D322D on #C8E2DA
Aa6.25:1 Good#C8E2DA on #2A5351
Aa6.25:1 Good#2A5351 on #C8E2DA
Aa4.81:1 Good#BA8F93 on #1D322D
Aa4.81:1 Good#1D322D on #BA8F93
Aa3.32:1 Poor#C8E2DA on #916C79
Aa3.32:1 Poor#916C79 on #C8E2DA

Color blindness preview

CSS variables

/* Swan Lake to Elite Teal — https://swatchly.xyz/palette/c8e2da-ba8f93-916c79-2a5351-1d322d */
:root {
  --swan-lake: #c8e2da;
  --rosy-brown: #ba8f93;
  --fruit-of-passion: #916c79;
  --hunter: #2a5351;
  --elite-teal: #1d322d;
}

Tailwind CSS v4

/* Swan Lake to Elite Teal — https://swatchly.xyz/palette/c8e2da-ba8f93-916c79-2a5351-1d322d */
@theme {
  --color-swan-lake: #c8e2da;
  --color-swan-lake-50: #edfbf7;
  --color-swan-lake-100: #e3f2ee;
  --color-swan-lake-200: #c8e2da;
  --color-swan-lake-300: #b4cac3;
  --color-swan-lake-400: #92aaa3;
  --color-swan-lake-500: #768e87;
  --color-swan-lake-600: #5c736c;
  --color-swan-lake-700: #465b55;
  --color-swan-lake-800: #354742;
  --color-swan-lake-900: #273732;
  --color-swan-lake-950: #17221f;
  --color-rosy-brown: #ba8f93;
  --color-rosy-brown-50: #ffeef0;
  --color-rosy-brown-100: #fee0e2;
  --color-rosy-brown-200: #edc9cc;
  --color-rosy-brown-300: #d8b1b4;
  --color-rosy-brown-400: #ba8f93;
  --color-rosy-brown-500: #9e7579;
  --color-rosy-brown-600: #835c60;
  --color-rosy-brown-700: #6b484b;
  --color-rosy-brown-800: #55373a;
  --color-rosy-brown-900: #432a2d;
  --color-rosy-brown-950: #2c191b;
  --color-fruit-of-passion: #916c79;
  --color-fruit-of-passion-50: #fff1f5;
  --color-fruit-of-passion-100: #ffe6ee;
  --color-fruit-of-passion-200: #f1d3dd;
  --color-fruit-of-passion-300: #dfbdc8;
  --color-fruit-of-passion-400: #c49eab;
  --color-fruit-of-passion-500: #ab8592;
  --color-fruit-of-passion-600: #916c79;
  --color-fruit-of-passion-700: #765460;
  --color-fruit-of-passion-800: #5e404b;
  --color-fruit-of-passion-900: #493039;
  --color-fruit-of-passion-950: #2f1c23;
  --color-hunter: #2a5351;
  --color-hunter-50: #e3fbf9;
  --color-hunter-100: #d6f2f0;
  --color-hunter-200: #bfdfdd;
  --color-hunter-300: #a6cbc9;
  --color-hunter-400: #85aeab;
  --color-hunter-500: #6a9492;
  --color-hunter-600: #527b78;
  --color-hunter-700: #3e6563;
  --color-hunter-800: #2a5351;
  --color-hunter-900: #21403e;
  --color-hunter-950: #122928;
  --color-elite-teal: #1d322d;
  --color-elite-teal-50: #ebf9f5;
  --color-elite-teal-100: #e0efeb;
  --color-elite-teal-200: #cadcd7;
  --color-elite-teal-300: #b1c6c1;
  --color-elite-teal-400: #8fa6a0;
  --color-elite-teal-500: #728a84;
  --color-elite-teal-600: #586e68;
  --color-elite-teal-700: #425651;
  --color-elite-teal-800: #31423d;
  --color-elite-teal-900: #1d322d;
  --color-elite-teal-950: #131d1b;
}