Wine Tasting to Foggy Love Color Palette

About this palette

Wine Tasting to Foggy Love is a 5-color cool palette: #502736 (Wine Tasting), #36663B (Jurassic Park), #7E74A5 (Purple Haze), #8CBC86 (Foliage), #CFC7E6 (Foggy Love). It mixes red, green, purple tones and feels cool overall. The strongest text pairing is #502736 on #CFC7E6 with a contrast ratio of 7.70:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Wine Tasting	rgb(80, 39, 54)	hsl(338, 34%, 23%)
Jurassic Park	rgb(54, 102, 59)	hsl(126, 31%, 31%)
Purple Haze	rgb(126, 116, 165)	hsl(252, 21%, 55%)
Foliage	rgb(140, 188, 134)	hsl(113, 29%, 63%)
Foggy Love	rgb(207, 199, 230)	hsl(255, 38%, 84%)

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.

Aa7.70:1 Very good#502736 on #CFC7E6
Aa7.70:1 Very good#CFC7E6 on #502736
Aa5.73:1 Good#502736 on #8CBC86
Aa5.73:1 Good#8CBC86 on #502736
Aa4.15:1 Poor#36663B on #CFC7E6
Aa4.15:1 Poor#CFC7E6 on #36663B
Aa3.09:1 Poor#36663B on #8CBC86
Aa3.09:1 Poor#8CBC86 on #36663B

Color blindness preview

CSS variables

/* Wine Tasting to Foggy Love — https://swatchly.xyz/palette/502736-36663b-7e74a5-8cbc86-cfc7e6 */
:root {
  --wine-tasting: #502736;
  --jurassic-park: #36663b;
  --purple-haze: #7e74a5;
  --foliage: #8cbc86;
  --foggy-love: #cfc7e6;
}

Tailwind CSS v4

/* Wine Tasting to Foggy Love — https://swatchly.xyz/palette/502736-36663b-7e74a5-8cbc86-cfc7e6 */
@theme {
  --color-wine-tasting: #502736;
  --color-wine-tasting-50: #fff1f5;
  --color-wine-tasting-100: #ffe3eb;
  --color-wine-tasting-200: #f3cbd7;
  --color-wine-tasting-300: #e0b3c1;
  --color-wine-tasting-400: #c393a2;
  --color-wine-tasting-500: #a87887;
  --color-wine-tasting-600: #8c5e6d;
  --color-wine-tasting-700: #734957;
  --color-wine-tasting-800: #5d3945;
  --color-wine-tasting-900: #502736;
  --color-wine-tasting-950: #311a22;
  --color-jurassic-park: #36663b;
  --color-jurassic-park-50: #e2fee3;
  --color-jurassic-park-100: #d5f5d6;
  --color-jurassic-park-200: #bee4c0;
  --color-jurassic-park-300: #a4d0a7;
  --color-jurassic-park-400: #82b285;
  --color-jurassic-park-500: #66976a;
  --color-jurassic-park-600: #4d7d51;
  --color-jurassic-park-700: #36663b;
  --color-jurassic-park-800: #28502d;
  --color-jurassic-park-900: #1c3e20;
  --color-jurassic-park-950: #0f2711;
  --color-purple-haze: #7e74a5;
  --color-purple-haze-50: #f3f1ff;
  --color-purple-haze-100: #e8e3ff;
  --color-purple-haze-200: #d3ccf5;
  --color-purple-haze-300: #bbb3e1;
  --color-purple-haze-400: #9b91c3;
  --color-purple-haze-500: #7e74a5;
  --color-purple-haze-600: #665c8a;
  --color-purple-haze-700: #514871;
  --color-purple-haze-800: #3f385b;
  --color-purple-haze-900: #312a49;
  --color-purple-haze-950: #1f1a30;
  --color-foliage: #8cbc86;
  --color-foliage-50: #eeffec;
  --color-foliage-100: #defbda;
  --color-foliage-200: #c9ebc4;
  --color-foliage-300: #b0d8ab;
  --color-foliage-400: #8cbc86;
  --color-foliage-500: #6f9e6a;
  --color-foliage-600: #53804e;
  --color-foliage-700: #3d6638;
  --color-foliage-800: #2b5027;
  --color-foliage-900: #1e3d1b;
  --color-foliage-950: #0f250d;
  --color-foggy-love: #cfc7e6;
  --color-foggy-love-50: #efeafe;
  --color-foggy-love-100: #e3def4;
  --color-foggy-love-200: #cfc7e6;
  --color-foggy-love-300: #bab3ce;
  --color-foggy-love-400: #9d95b2;
  --color-foggy-love-500: #847c98;
  --color-foggy-love-600: #6b647e;
  --color-foggy-love-700: #564f67;
  --color-foggy-love-800: #443e54;
  --color-foggy-love-900: #342f41;
  --color-foggy-love-950: #201d2a;
}