English Walnut to Lavender Bliss Color Palette

About this palette

English Walnut to Lavender Bliss is a 4-color muted, gradient palette: #422C22 (English Walnut), #5D5B79 (Plummy), #859E8F (Mother Earth), #C6C6DA (Lavender Bliss). It mixes brown, purple, green, gray tones and feels cool overall. The strongest text pairing is #422C22 on #C6C6DA with a contrast ratio of 7.73:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
English Walnut	rgb(66, 44, 34)	hsl(19, 32%, 20%)
Plummy	rgb(93, 91, 121)	hsl(244, 14%, 42%)
Mother Earth	rgb(133, 158, 143)	hsl(144, 11%, 57%)
Lavender Bliss	rgb(198, 198, 218)	hsl(240, 21%, 82%)

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.

Aa7.73:1 Very good#422C22 on #C6C6DA
Aa7.73:1 Very good#C6C6DA on #422C22
Aa4.51:1 Good#422C22 on #859E8F
Aa4.51:1 Good#859E8F on #422C22
Aa3.86:1 Poor#5D5B79 on #C6C6DA
Aa3.86:1 Poor#C6C6DA on #5D5B79

Color blindness preview

CSS variables

/* English Walnut to Lavender Bliss — https://swatchly.xyz/palette/422c22-5d5b79-859e8f-c6c6da */
:root {
  --english-walnut: #422c22;
  --plummy: #5d5b79;
  --mother-earth: #859e8f;
  --lavender-bliss: #c6c6da;
}

Tailwind CSS v4

/* English Walnut to Lavender Bliss — https://swatchly.xyz/palette/422c22-5d5b79-859e8f-c6c6da */
@theme {
  --color-english-walnut: #422c22;
  --color-english-walnut-50: #fff2ec;
  --color-english-walnut-100: #f9e7df;
  --color-english-walnut-200: #e8d2c9;
  --color-english-walnut-300: #d3bbb0;
  --color-english-walnut-400: #b59b8f;
  --color-english-walnut-500: #9a7f74;
  --color-english-walnut-600: #7e655a;
  --color-english-walnut-700: #654f45;
  --color-english-walnut-800: #503d34;
  --color-english-walnut-900: #422c22;
  --color-english-walnut-950: #271c16;
  --color-plummy: #5d5b79;
  --color-plummy-50: #f4f4ff;
  --color-plummy-100: #e9e9ff;
  --color-plummy-200: #d7d6f0;
  --color-plummy-300: #c2c1de;
  --color-plummy-400: #a5a3c2;
  --color-plummy-500: #8b89a9;
  --color-plummy-600: #72708f;
  --color-plummy-700: #5d5b79;
  --color-plummy-800: #484760;
  --color-plummy-900: #37364b;
  --color-plummy-950: #222131;
  --color-mother-earth: #859e8f;
  --color-mother-earth-50: #e6f6ec;
  --color-mother-earth-100: #d9ebe0;
  --color-mother-earth-200: #c1d6c9;
  --color-mother-earth-300: #a7beb0;
  --color-mother-earth-400: #859e8f;
  --color-mother-earth-500: #6c8476;
  --color-mother-earth-600: #556c5e;
  --color-mother-earth-700: #42564a;
  --color-mother-earth-800: #32443a;
  --color-mother-earth-900: #26362d;
  --color-mother-earth-950: #17221c;
  --color-lavender-bliss: #c6c6da;
  --color-lavender-bliss-50: #f8f8ff;
  --color-lavender-bliss-100: #efeffb;
  --color-lavender-bliss-200: #dcdcea;
  --color-lavender-bliss-300: #c6c6da;
  --color-lavender-bliss-400: #a5a5b8;
  --color-lavender-bliss-500: #89899b;
  --color-lavender-bliss-600: #6d6d7f;
  --color-lavender-bliss-700: #565666;
  --color-lavender-bliss-800: #424250;
  --color-lavender-bliss-900: #32313d;
  --color-lavender-bliss-950: #1e1e27;
}