Bitter Liquorice to Bitter Melon color palette

28291BBitter Liquorice 4E5029Jungle King 83866DAntique A7AC81Cardamom D1D7B3Bitter Melon

About this palette

Bitter Liquorice to Bitter Melon is a 5-color muted, warm, earthy, vintage, gradient palette: #28291B (Bitter Liquorice), #4E5029 (Jungle King), #83866D (Antique), #A7AC81 (Cardamom), #D1D7B3 (Bitter Melon). It mixes gray, brown, green tones and feels warm overall. The strongest text pairing is #28291B on #D1D7B3 with a contrast ratio of 9.89:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Bitter Liquorice	rgb(40, 41, 27)	hsl(64, 21%, 13%)
Jungle King	rgb(78, 80, 41)	hsl(63, 32%, 24%)
Antique	rgb(131, 134, 109)	hsl(67, 10%, 48%)
Cardamom	rgb(167, 172, 129)	hsl(67, 21%, 59%)
Bitter Melon	rgb(209, 215, 179)	hsl(70, 31%, 77%)

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.

Aa9.89:1 Very good#28291B on #D1D7B3
Aa9.89:1 Very good#D1D7B3 on #28291B
Aa6.23:1 Good#28291B on #A7AC81
Aa6.23:1 Good#A7AC81 on #28291B
Aa5.63:1 Good#4E5029 on #D1D7B3
Aa5.63:1 Good#D1D7B3 on #4E5029
Aa3.93:1 Poor#28291B on #83866D
Aa3.93:1 Poor#83866D on #28291B

Color blindness preview

CSS variables

/* Bitter Liquorice to Bitter Melon — https://swatchly.xyz/palette/28291b-4e5029-83866d-a7ac81-d1d7b3 */
:root {
  --bitter-liquorice: #28291b;
  --jungle-king: #4e5029;
  --antique: #83866d;
  --cardamom: #a7ac81;
  --bitter-melon: #d1d7b3;
}

Tailwind CSS v4

/* Bitter Liquorice to Bitter Melon — https://swatchly.xyz/palette/28291b-4e5029-83866d-a7ac81-d1d7b3 */
@theme {
  --color-bitter-liquorice: #28291b;
  --color-bitter-liquorice-50: #f5f6ec;
  --color-bitter-liquorice-100: #ebece1;
  --color-bitter-liquorice-200: #d7d9cb;
  --color-bitter-liquorice-300: #c1c2b3;
  --color-bitter-liquorice-400: #a2a393;
  --color-bitter-liquorice-500: #888a79;
  --color-bitter-liquorice-600: #6f7161;
  --color-bitter-liquorice-700: #5a5c4d;
  --color-bitter-liquorice-800: #494a3d;
  --color-bitter-liquorice-900: #3b3b30;
  --color-bitter-liquorice-950: #28291b;
  --color-jungle-king: #4e5029;
  --color-jungle-king-50: #f5f8df;
  --color-jungle-king-100: #eceed3;
  --color-jungle-king-200: #d6d9b8;
  --color-jungle-king-300: #bec19c;
  --color-jungle-king-400: #9ea178;
  --color-jungle-king-500: #81845b;
  --color-jungle-king-600: #656841;
  --color-jungle-king-700: #4e5029;
  --color-jungle-king-800: #3c3e20;
  --color-jungle-king-900: #2e3017;
  --color-jungle-king-950: #1c1d0b;
  --color-antique: #83866d;
  --color-antique-50: #f4f6e7;
  --color-antique-100: #eaecdb;
  --color-antique-200: #d6d8c4;
  --color-antique-300: #bec1ab;
  --color-antique-400: #9fa289;
  --color-antique-500: #83866d;
  --color-antique-600: #696c54;
  --color-antique-700: #535640;
  --color-antique-800: #414330;
  --color-antique-900: #323424;
  --color-antique-950: #1f2015;
  --color-cardamom: #a7ac81;
  --color-cardamom-50: #f7fae2;
  --color-cardamom-100: #eef1d7;
  --color-cardamom-200: #dbdfbf;
  --color-cardamom-300: #c5caa6;
  --color-cardamom-400: #a7ac81;
  --color-cardamom-500: #8b8f66;
  --color-cardamom-600: #6f734b;
  --color-cardamom-700: #585b36;
  --color-cardamom-800: #444727;
  --color-cardamom-900: #34361b;
  --color-cardamom-950: #1f210d;
  --color-bitter-melon: #d1d7b3;
  --color-bitter-melon-50: #f1f4e0;
  --color-bitter-melon-100: #e6ead3;
  --color-bitter-melon-200: #d1d7b3;
  --color-bitter-melon-300: #bcc1a2;
  --color-bitter-melon-400: #9da281;
  --color-bitter-melon-500: #838866;
  --color-bitter-melon-600: #696e4e;
  --color-bitter-melon-700: #53583b;
  --color-bitter-melon-800: #41452c;
  --color-bitter-melon-900: #323520;
  --color-bitter-melon-950: #1f2111;
}