Bok Choy to Bitter Liquorice Color Palette

About this palette

Bok Choy to Bitter Liquorice is a 5-color muted, cool palette: #BAC9AB (Bok Choy), #A689A8 (Voila!), #2C564E (Hunter), #857386 (Vintage), #25271F (Bitter Liquorice). It mixes green, pink, turquoise, gray tones and feels cool overall. The strongest text pairing is #BAC9AB on #25271F with a contrast ratio of 8.66:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Bok Choy	rgb(186, 201, 171)	hsl(90, 22%, 73%)
Voila!	rgb(166, 137, 168)	hsl(296, 15%, 60%)
Hunter	rgb(44, 86, 78)	hsl(169, 32%, 25%)
Vintage	rgb(133, 115, 134)	hsl(297, 8%, 49%)
Bitter Liquorice	rgb(37, 39, 31)	hsl(75, 11%, 14%)

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.66:1 Very good#BAC9AB on #25271F
Aa8.66:1 Very good#25271F on #BAC9AB
Aa4.87:1 Good#A689A8 on #25271F
Aa4.87:1 Good#25271F on #A689A8
Aa4.72:1 Good#BAC9AB on #2C564E
Aa4.72:1 Good#2C564E on #BAC9AB
Aa3.45:1 Poor#857386 on #25271F
Aa3.45:1 Poor#25271F on #857386

Color blindness preview

CSS variables

/* Bok Choy to Bitter Liquorice — https://swatchly.xyz/palette/bac9ab-a689a8-2c564e-857386-25271f */
:root {
  --bok-choy: #bac9ab;
  --voila: #a689a8;
  --hunter: #2c564e;
  --vintage: #857386;
  --bitter-liquorice: #25271f;
}

Tailwind CSS v4

/* Bok Choy to Bitter Liquorice — https://swatchly.xyz/palette/bac9ab-a689a8-2c564e-857386-25271f */
@theme {
  --color-bok-choy: #bac9ab;
  --color-bok-choy-50: #f1fae9;
  --color-bok-choy-100: #e7f0de;
  --color-bok-choy-200: #d2dec7;
  --color-bok-choy-300: #bac9ab;
  --color-bok-choy-400: #9ba98d;
  --color-bok-choy-500: #7f8d71;
  --color-bok-choy-600: #657257;
  --color-bok-choy-700: #4f5b42;
  --color-bok-choy-800: #3c4731;
  --color-bok-choy-900: #2e3624;
  --color-bok-choy-950: #1b2215;
  --color-voila: #a689a8;
  --color-voila-50: #fce9fd;
  --color-voila-100: #f1dcf2;
  --color-voila-200: #ddc5df;
  --color-voila-300: #c6abc8;
  --color-voila-400: #a689a8;
  --color-voila-500: #8d708f;
  --color-voila-600: #735975;
  --color-voila-700: #5d465f;
  --color-voila-800: #4b364c;
  --color-voila-900: #3b2a3d;
  --color-voila-950: #271a28;
  --color-hunter: #2c564e;
  --color-hunter-50: #e3fcf6;
  --color-hunter-100: #d6f2ec;
  --color-hunter-200: #bdded7;
  --color-hunter-300: #a1c7bf;
  --color-hunter-400: #7da79e;
  --color-hunter-500: #5f8a81;
  --color-hunter-600: #456e66;
  --color-hunter-700: #2c564e;
  --color-hunter-800: #23433d;
  --color-hunter-900: #19342e;
  --color-hunter-950: #0d201c;
  --color-vintage: #857386;
  --color-vintage-50: #faeefb;
  --color-vintage-100: #efe2ef;
  --color-vintage-200: #dacbdb;
  --color-vintage-300: #c3b2c4;
  --color-vintage-400: #a290a3;
  --color-vintage-500: #857386;
  --color-vintage-600: #6c5c6d;
  --color-vintage-700: #574858;
  --color-vintage-800: #453846;
  --color-vintage-900: #362b37;
  --color-vintage-950: #221a23;
  --color-bitter-liquorice: #25271f;
  --color-bitter-liquorice-50: #f4f6f0;
  --color-bitter-liquorice-100: #eaece5;
  --color-bitter-liquorice-200: #d6d9d1;
  --color-bitter-liquorice-300: #c0c2b9;
  --color-bitter-liquorice-400: #a0a399;
  --color-bitter-liquorice-500: #86897f;
  --color-bitter-liquorice-600: #6d7066;
  --color-bitter-liquorice-700: #585a52;
  --color-bitter-liquorice-800: #464841;
  --color-bitter-liquorice-900: #383a33;
  --color-bitter-liquorice-950: #25271f;
}