Wine Tasting to Cotton Boll Color Palette

About this palette

Wine Tasting to Cotton Boll is a 4-color muted, gradient palette: #47263A (Wine Tasting), #82739B (Purple Haze), #ADB4D9 (Over the Moon), #E4ECFF (Cotton Boll). It mixes red, purple, white tones and feels cool overall. The strongest text pairing is #47263A on #E4ECFF with a contrast ratio of 11.04:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Wine Tasting	rgb(71, 38, 58)	hsl(324, 30%, 21%)
Purple Haze	rgb(130, 115, 155)	hsl(262, 17%, 53%)
Over the Moon	rgb(173, 180, 217)	hsl(230, 37%, 76%)
Cotton Boll	rgb(228, 236, 255)	hsl(222, 100%, 95%)

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.

Aa11.04:1 Very good#47263A on #E4ECFF
Aa11.04:1 Very good#E4ECFF on #47263A
Aa6.42:1 Good#47263A on #ADB4D9
Aa6.42:1 Good#ADB4D9 on #47263A
Aa3.64:1 Poor#82739B on #E4ECFF
Aa3.64:1 Poor#E4ECFF on #82739B
Aa3.03:1 Poor#47263A on #82739B
Aa3.03:1 Poor#82739B on #47263A

Color blindness preview

CSS variables

/* Wine Tasting to Cotton Boll — https://swatchly.xyz/palette/47263a-82739b-adb4d9-e4ecff */
:root {
  --wine-tasting: #47263a;
  --purple-haze: #82739b;
  --over-the-moon: #adb4d9;
  --cotton-boll: #e4ecff;
}

Tailwind CSS v4

/* Wine Tasting to Cotton Boll — https://swatchly.xyz/palette/47263a-82739b-adb4d9-e4ecff */
@theme {
  --color-wine-tasting: #47263a;
  --color-wine-tasting-50: #fff0f8;
  --color-wine-tasting-100: #fee2f1;
  --color-wine-tasting-200: #edcddf;
  --color-wine-tasting-300: #d9b5c9;
  --color-wine-tasting-400: #bb94aa;
  --color-wine-tasting-500: #a0788f;
  --color-wine-tasting-600: #845f74;
  --color-wine-tasting-700: #6b495d;
  --color-wine-tasting-800: #553849;
  --color-wine-tasting-900: #47263a;
  --color-wine-tasting-950: #2a1923;
  --color-purple-haze: #82739b;
  --color-purple-haze-50: #f5f0ff;
  --color-purple-haze-100: #ece1fe;
  --color-purple-haze-200: #d7cbed;
  --color-purple-haze-300: #bfb2d8;
  --color-purple-haze-400: #9f90b8;
  --color-purple-haze-500: #82739b;
  --color-purple-haze-600: #695b80;
  --color-purple-haze-700: #544769;
  --color-purple-haze-800: #423754;
  --color-purple-haze-900: #342a43;
  --color-purple-haze-950: #211a2c;
  --color-over-the-moon: #adb4d9;
  --color-over-the-moon-50: #ebefff;
  --color-over-the-moon-100: #dde2fc;
  --color-over-the-moon-200: #c7cdeb;
  --color-over-the-moon-300: #adb4d9;
  --color-over-the-moon-400: #9097ba;
  --color-over-the-moon-500: #777da0;
  --color-over-the-moon-600: #5f6585;
  --color-over-the-moon-700: #4b506d;
  --color-over-the-moon-800: #3b3f59;
  --color-over-the-moon-900: #2d3147;
  --color-over-the-moon-950: #1b1e2e;
  --color-cotton-boll: #e4ecff;
  --color-cotton-boll-50: #f2f6ff;
  --color-cotton-boll-100: #e4ecff;
  --color-cotton-boll-200: #d2d8e6;
  --color-cotton-boll-300: #bbc1d1;
  --color-cotton-boll-400: #9ba2b3;
  --color-cotton-boll-500: #7f8697;
  --color-cotton-boll-600: #656c7c;
  --color-cotton-boll-700: #4f5564;
  --color-cotton-boll-800: #3d424f;
  --color-cotton-boll-900: #2e333d;
  --color-cotton-boll-950: #1c1f27;
}