Jovial Jade to Black Market Color Palette

About this palette

Jovial Jade to Black Market is a 5-color cool, vintage palette: #97DAAC (Jovial Jade), #D280B3 (Pink Punk), #677ACF (Serenity’s Reign), #615A00 (Ayahuasca Vine), #232441 (Black Market). It mixes green, pink, blue, brown, purple tones and feels cool overall. The strongest text pairing is #97DAAC on #232441 with a contrast ratio of 9.24:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Jovial Jade	rgb(151, 218, 172)	hsl(139, 48%, 72%)
Pink Punk	rgb(210, 128, 179)	hsl(323, 48%, 66%)
Serenity’s Reign	rgb(103, 122, 207)	hsl(229, 52%, 61%)
Ayahuasca Vine	rgb(97, 90, 0)	hsl(56, 100%, 19%)
Black Market	rgb(35, 36, 65)	hsl(238, 30%, 20%)

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#97DAAC on #232441
Aa9.24:1 Very good#232441 on #97DAAC
Aa5.34:1 Good#D280B3 on #232441
Aa5.34:1 Good#232441 on #D280B3
Aa4.36:1 Poor#97DAAC on #615A00
Aa4.36:1 Poor#615A00 on #97DAAC
Aa3.76:1 Poor#677ACF on #232441
Aa3.76:1 Poor#232441 on #677ACF

Color blindness preview

CSS variables

/* Jovial Jade to Black Market — https://swatchly.xyz/palette/97daac-d280b3-677acf-615a00-232441 */
:root {
  --jovial-jade: #97daac;
  --pink-punk: #d280b3;
  --serenity-s-reign: #677acf;
  --ayahuasca-vine: #615a00;
  --black-market: #232441;
}

Tailwind CSS v4

/* Jovial Jade to Black Market — https://swatchly.xyz/palette/97daac-d280b3-677acf-615a00-232441 */
@theme {
  --color-jovial-jade: #97daac;
  --color-jovial-jade-50: #eafff0;
  --color-jovial-jade-100: #d4fbdf;
  --color-jovial-jade-200: #bcebca;
  --color-jovial-jade-300: #97daac;
  --color-jovial-jade-400: #7ab88e;
  --color-jovial-jade-500: #5a9b70;
  --color-jovial-jade-600: #3e7e56;
  --color-jovial-jade-700: #296540;
  --color-jovial-jade-800: #194f2f;
  --color-jovial-jade-900: #0e3d22;
  --color-jovial-jade-950: #052613;
  --color-pink-punk: #d280b3;
  --color-pink-punk-50: #ffeff8;
  --color-pink-punk-100: #ffdff1;
  --color-pink-punk-200: #ffc0e5;
  --color-pink-punk-300: #eea4d1;
  --color-pink-punk-400: #d280b3;
  --color-pink-punk-500: #b56597;
  --color-pink-punk-600: #974c7c;
  --color-pink-punk-700: #7c3864;
  --color-pink-punk-800: #642850;
  --color-pink-punk-900: #4f1d3e;
  --color-pink-punk-950: #340f28;
  --color-serenity-s-reign: #677acf;
  --color-serenity-s-reign-50: #f0f4ff;
  --color-serenity-s-reign-100: #e2e9ff;
  --color-serenity-s-reign-200: #c6d3ff;
  --color-serenity-s-reign-300: #a7baff;
  --color-serenity-s-reign-400: #8397ec;
  --color-serenity-s-reign-500: #677acf;
  --color-serenity-s-reign-600: #5060b1;
  --color-serenity-s-reign-700: #3d4b93;
  --color-serenity-s-reign-800: #2e3979;
  --color-serenity-s-reign-900: #222b61;
  --color-serenity-s-reign-950: #131a41;
  --color-ayahuasca-vine: #615a00;
  --color-ayahuasca-vine-50: #faf8cf;
  --color-ayahuasca-vine-100: #f1eec0;
  --color-ayahuasca-vine-200: #dfdba4;
  --color-ayahuasca-vine-300: #cac586;
  --color-ayahuasca-vine-400: #aca65f;
  --color-ayahuasca-vine-500: #918b40;
  --color-ayahuasca-vine-600: #777125;
  --color-ayahuasca-vine-700: #615a00;
  --color-ayahuasca-vine-800: #4c4600;
  --color-ayahuasca-vine-900: #3a3600;
  --color-ayahuasca-vine-950: #252100;
  --color-black-market: #232441;
  --color-black-market-50: #f3f4ff;
  --color-black-market-100: #e7e9ff;
  --color-black-market-200: #d2d5f2;
  --color-black-market-300: #bbbede;
  --color-black-market-400: #9b9ec1;
  --color-black-market-500: #8285a8;
  --color-black-market-600: #696c8e;
  --color-black-market-700: #555776;
  --color-black-market-800: #444661;
  --color-black-market-900: #363850;
  --color-black-market-950: #232441;
}