Jolly Jade to Cotton Candy Comet Color Palette

About this palette

Jolly Jade to Cotton Candy Comet is a 5-color warm, vintage palette: #78C8B7 (Jolly Jade), #853B4F (Liaison), #003232 (Elite Teal), #B17886 (Never Forget), #FFC3C7 (Cotton Candy Comet). It mixes turquoise, red, pink tones and feels warm overall. The strongest text pairing is #003232 on #FFC3C7 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
Jolly Jade	rgb(120, 200, 183)	hsl(167, 42%, 63%)
Liaison	rgb(133, 59, 79)	hsl(344, 39%, 38%)
Elite Teal	rgb(0, 50, 50)	hsl(180, 100%, 10%)
Never Forget	rgb(177, 120, 134)	hsl(345, 27%, 58%)
Cotton Candy Comet	rgb(255, 195, 199)	hsl(356, 100%, 88%)

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#003232 on #FFC3C7
Aa9.24:1 Very good#FFC3C7 on #003232
Aa7.15:1 Very good#78C8B7 on #003232
Aa7.15:1 Very good#003232 on #78C8B7
Aa5.07:1 Good#853B4F on #FFC3C7
Aa5.07:1 Good#FFC3C7 on #853B4F
Aa3.93:1 Poor#003232 on #B17886
Aa3.93:1 Poor#B17886 on #003232

Color blindness preview

CSS variables

/* Jolly Jade to Cotton Candy Comet — https://swatchly.xyz/palette/78c8b7-853b4f-003232-b17886-ffc3c7 */
:root {
  --jolly-jade: #78c8b7;
  --liaison: #853b4f;
  --elite-teal: #003232;
  --never-forget: #b17886;
  --cotton-candy-comet: #ffc3c7;
}

Tailwind CSS v4

/* Jolly Jade to Cotton Candy Comet — https://swatchly.xyz/palette/78c8b7-853b4f-003232-b17886-ffc3c7 */
@theme {
  --color-jolly-jade: #78c8b7;
  --color-jolly-jade-50: #cdfbf0;
  --color-jolly-jade-100: #bdf1e4;
  --color-jolly-jade-200: #a0ddcf;
  --color-jolly-jade-300: #78c8b7;
  --color-jolly-jade-400: #5caa9a;
  --color-jolly-jade-500: #3f9080;
  --color-jolly-jade-600: #247668;
  --color-jolly-jade-700: #0e6053;
  --color-jolly-jade-800: #004c41;
  --color-jolly-jade-900: #003c33;
  --color-jolly-jade-950: #002620;
  --color-liaison: #853b4f;
  --color-liaison-50: #fff1f4;
  --color-liaison-100: #ffe3e8;
  --color-liaison-200: #ffc6d2;
  --color-liaison-300: #f3aaba;
  --color-liaison-400: #d7889a;
  --color-liaison-500: #bb6c7f;
  --color-liaison-600: #9e5265;
  --color-liaison-700: #853b4f;
  --color-liaison-800: #692d3d;
  --color-liaison-900: #53202e;
  --color-liaison-950: #36121c;
  --color-elite-teal: #003232;
  --color-elite-teal-50: #e1fbfb;
  --color-elite-teal-100: #d5f2f1;
  --color-elite-teal-200: #bddfdf;
  --color-elite-teal-300: #a2cac9;
  --color-elite-teal-400: #7da9a9;
  --color-elite-teal-500: #608c8c;
  --color-elite-teal-600: #45706f;
  --color-elite-teal-700: #305757;
  --color-elite-teal-800: #204241;
  --color-elite-teal-900: #003232;
  --color-elite-teal-950: #0a1c1c;
  --color-never-forget: #b17886;
  --color-never-forget-50: #fff2f5;
  --color-never-forget-100: #ffe5eb;
  --color-never-forget-200: #faccd6;
  --color-never-forget-300: #e8b4c0;
  --color-never-forget-400: #cc93a1;
  --color-never-forget-500: #b17886;
  --color-never-forget-600: #935d6b;
  --color-never-forget-700: #784754;
  --color-never-forget-800: #603641;
  --color-never-forget-900: #4b2731;
  --color-never-forget-950: #30171e;
  --color-cotton-candy-comet: #ffc3c7;
  --color-cotton-candy-comet-50: #ffeff0;
  --color-cotton-candy-comet-100: #ffe0e2;
  --color-cotton-candy-comet-200: #ffc3c7;
  --color-cotton-candy-comet-300: #e3b0b3;
  --color-cotton-candy-comet-400: #c68f93;
  --color-cotton-candy-comet-500: #aa7478;
  --color-cotton-candy-comet-600: #8e5b5f;
  --color-cotton-candy-comet-700: #74464a;
  --color-cotton-candy-comet-800: #5d3539;
  --color-cotton-candy-comet-900: #49272b;
  --color-cotton-candy-comet-950: #2f1719;
}