Wine Tasting to Milk Chocolate color palette

42283AWine Tasting C1A0BENovel Lilac 6D85A2Bay View D1EED9Jade Palace 7C4B1BMilk Chocolate

About this palette

Wine Tasting to Milk Chocolate is a 5-color muted, cool, vintage palette: #42283A (Wine Tasting), #C1A0BE (Novel Lilac), #6D85A2 (Bay View), #D1EED9 (Jade Palace), #7C4B1B (Milk Chocolate). It mixes purple, pink, blue, green, brown tones and feels cool overall. The strongest text pairing is #42283A on #D1EED9 with a contrast ratio of 10.61:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Wine Tasting	rgb(66, 40, 58)	hsl(318, 25%, 21%)
Novel Lilac	rgb(193, 160, 190)	hsl(305, 21%, 69%)
Bay View	rgb(109, 133, 162)	hsl(213, 22%, 53%)
Jade Palace	rgb(209, 238, 217)	hsl(137, 46%, 88%)
Milk Chocolate	rgb(124, 75, 27)	hsl(30, 64%, 30%)

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.

Aa10.61:1 Very good#42283A on #D1EED9
Aa10.61:1 Very good#D1EED9 on #42283A
Aa5.88:1 Good#D1EED9 on #7C4B1B
Aa5.88:1 Good#7C4B1B on #D1EED9
Aa5.66:1 Good#42283A on #C1A0BE
Aa5.66:1 Good#C1A0BE on #42283A
Aa3.46:1 Poor#42283A on #6D85A2
Aa3.46:1 Poor#6D85A2 on #42283A

Color blindness preview

CSS variables

/* Wine Tasting to Milk Chocolate — https://swatchly.xyz/palette/42283a-c1a0be-6d85a2-d1eed9-7c4b1b */
:root {
  --wine-tasting: #42283a;
  --novel-lilac: #c1a0be;
  --bay-view: #6d85a2;
  --jade-palace: #d1eed9;
  --milk-chocolate: #7c4b1b;
}

Tailwind CSS v4

/* Wine Tasting to Milk Chocolate — https://swatchly.xyz/palette/42283a-c1a0be-6d85a2-d1eed9-7c4b1b */
@theme {
  --color-wine-tasting: #42283a;
  --color-wine-tasting-50: #fff0fa;
  --color-wine-tasting-100: #fae4f2;
  --color-wine-tasting-200: #e8cfdf;
  --color-wine-tasting-300: #d4b7ca;
  --color-wine-tasting-400: #b697ab;
  --color-wine-tasting-500: #9a7b8f;
  --color-wine-tasting-600: #7e6174;
  --color-wine-tasting-700: #654b5d;
  --color-wine-tasting-800: #503949;
  --color-wine-tasting-900: #42283a;
  --color-wine-tasting-950: #271923;
  --color-novel-lilac: #c1a0be;
  --color-novel-lilac-50: #fff6fe;
  --color-novel-lilac-100: #feeafc;
  --color-novel-lilac-200: #eed6ec;
  --color-novel-lilac-300: #dcc0d9;
  --color-novel-lilac-400: #c1a0be;
  --color-novel-lilac-500: #a383a0;
  --color-novel-lilac-600: #856783;
  --color-novel-lilac-700: #6b4f69;
  --color-novel-lilac-800: #543c52;
  --color-novel-lilac-900: #412c3f;
  --color-novel-lilac-950: #281a27;
  --color-bay-view: #6d85a2;
  --color-bay-view-50: #edf5ff;
  --color-bay-view-100: #dcecff;
  --color-bay-view-200: #c4d8f0;
  --color-bay-view-300: #abc1dc;
  --color-bay-view-400: #89a1be;
  --color-bay-view-500: #6d85a2;
  --color-bay-view-600: #546b86;
  --color-bay-view-700: #40556d;
  --color-bay-view-800: #304258;
  --color-bay-view-900: #243345;
  --color-bay-view-950: #15202d;
  --color-jade-palace: #d1eed9;
  --color-jade-palace-50: #e4f5e9;
  --color-jade-palace-100: #d1eed9;
  --color-jade-palace-200: #c3d9c9;
  --color-jade-palace-300: #acc4b3;
  --color-jade-palace-400: #8ca794;
  --color-jade-palace-500: #728c79;
  --color-jade-palace-600: #597260;
  --color-jade-palace-700: #455c4c;
  --color-jade-palace-800: #34483a;
  --color-jade-palace-900: #26382c;
  --color-jade-palace-950: #16231a;
  --color-milk-chocolate: #7c4b1b;
  --color-milk-chocolate-50: #fff3e9;
  --color-milk-chocolate-100: #ffe6d2;
  --color-milk-chocolate-200: #f9cfac;
  --color-milk-chocolate-300: #e7b78f;
  --color-milk-chocolate-400: #cb976a;
  --color-milk-chocolate-500: #b07b4d;
  --color-milk-chocolate-600: #946134;
  --color-milk-chocolate-700: #7c4b1b;
  --color-milk-chocolate-800: #623a12;
  --color-milk-chocolate-900: #4d2b08;
  --color-milk-chocolate-950: #321a02;
}