Canadian Tuxedo to Wine Tasting color palette

5899BCCanadian Tuxedo AFA87ABamboo Forest 006385Harem Silk FEC7DCSugarwinkle 53283CWine Tasting

About this palette

Canadian Tuxedo to Wine Tasting is a 5-color warm, vintage palette: #5899BC (Canadian Tuxedo), #AFA87A (Bamboo Forest), #006385 (Harem Silk), #FEC7DC (Sugarwinkle), #53283C (Wine Tasting). It mixes blue, yellow, pink, red tones and feels warm overall. The strongest text pairing is #FEC7DC on #53283C with a contrast ratio of 8.30:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Canadian Tuxedo	rgb(88, 153, 188)	hsl(201, 43%, 54%)
Bamboo Forest	rgb(175, 168, 122)	hsl(52, 25%, 58%)
Harem Silk	rgb(0, 99, 133)	hsl(195, 100%, 26%)
Sugarwinkle	rgb(254, 199, 220)	hsl(337, 96%, 89%)
Wine Tasting	rgb(83, 40, 60)	hsl(332, 35%, 24%)

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.

Aa8.30:1 Very good#FEC7DC on #53283C
Aa8.30:1 Very good#53283C on #FEC7DC
Aa5.01:1 Good#AFA87A on #53283C
Aa5.01:1 Good#53283C on #AFA87A
Aa4.62:1 Good#006385 on #FEC7DC
Aa4.62:1 Good#FEC7DC on #006385
Aa3.86:1 Poor#5899BC on #53283C
Aa3.86:1 Poor#53283C on #5899BC

Color blindness preview

CSS variables

/* Canadian Tuxedo to Wine Tasting — https://swatchly.xyz/palette/5899bc-afa87a-006385-fec7dc-53283c */
:root {
  --canadian-tuxedo: #5899bc;
  --bamboo-forest: #afa87a;
  --harem-silk: #006385;
  --sugarwinkle: #fec7dc;
  --wine-tasting: #53283c;
}

Tailwind CSS v4

/* Canadian Tuxedo to Wine Tasting — https://swatchly.xyz/palette/5899bc-afa87a-006385-fec7dc-53283c */
@theme {
  --color-canadian-tuxedo: #5899bc;
  --color-canadian-tuxedo-50: #eef9ff;
  --color-canadian-tuxedo-100: #def3ff;
  --color-canadian-tuxedo-200: #b6e4ff;
  --color-canadian-tuxedo-300: #9bd0ef;
  --color-canadian-tuxedo-400: #76b3d5;
  --color-canadian-tuxedo-500: #5899bc;
  --color-canadian-tuxedo-600: #3b7c9e;
  --color-canadian-tuxedo-700: #246381;
  --color-canadian-tuxedo-800: #134d68;
  --color-canadian-tuxedo-900: #073b51;
  --color-canadian-tuxedo-950: #012434;
  --color-bamboo-forest: #afa87a;
  --color-bamboo-forest-50: #fcf8de;
  --color-bamboo-forest-100: #f3efd2;
  --color-bamboo-forest-200: #e1dcba;
  --color-bamboo-forest-300: #ccc7a0;
  --color-bamboo-forest-400: #afa87a;
  --color-bamboo-forest-500: #928c5f;
  --color-bamboo-forest-600: #777045;
  --color-bamboo-forest-700: #5f5830;
  --color-bamboo-forest-800: #4a4521;
  --color-bamboo-forest-900: #393416;
  --color-bamboo-forest-950: #23200a;
  --color-harem-silk: #006385;
  --color-harem-silk-50: #eaf8ff;
  --color-harem-silk-100: #d4f0ff;
  --color-harem-silk-200: #aae2fe;
  --color-harem-silk-300: #8dcded;
  --color-harem-silk-400: #65afd2;
  --color-harem-silk-500: #4694b8;
  --color-harem-silk-600: #297a9c;
  --color-harem-silk-700: #006385;
  --color-harem-silk-800: #004d69;
  --color-harem-silk-900: #003c52;
  --color-harem-silk-950: #002535;
  --color-sugarwinkle: #fec7dc;
  --color-sugarwinkle-50: #fff2f7;
  --color-sugarwinkle-100: #ffe4ee;
  --color-sugarwinkle-200: #fec7dc;
  --color-sugarwinkle-300: #e1b3c5;
  --color-sugarwinkle-400: #c492a5;
  --color-sugarwinkle-500: #a8768a;
  --color-sugarwinkle-600: #8b5c6f;
  --color-sugarwinkle-700: #714758;
  --color-sugarwinkle-800: #5a3545;
  --color-sugarwinkle-900: #472835;
  --color-sugarwinkle-950: #2d1721;
  --color-wine-tasting: #53283c;
  --color-wine-tasting-50: #fff1f6;
  --color-wine-tasting-100: #ffe2ed;
  --color-wine-tasting-200: #f4cadb;
  --color-wine-tasting-300: #e0b2c5;
  --color-wine-tasting-400: #c492a7;
  --color-wine-tasting-500: #aa778d;
  --color-wine-tasting-600: #8e5e73;
  --color-wine-tasting-700: #764a5d;
  --color-wine-tasting-800: #60394a;
  --color-wine-tasting-900: #53283c;
  --color-wine-tasting-950: #331b26;
}