English Walnut to Mellow Marrow color palette

3E2B21English Walnut 4C4565Nightly Walk 4C816CTurquoise Tortoise 79988AYucca A5A5CBImperial Lilac E8C1AEMellow Marrow

Open in generator Export PNG, PDF, ASE…

About this palette

English Walnut to Mellow Marrow is a 6-color muted, cool palette: #3E2B21 (English Walnut), #4C4565 (Nightly Walk), #4C816C (Turquoise Tortoise), #79988A (Yucca), #A5A5CB (Imperial Lilac), #E8C1AE (Mellow Marrow). It mixes gray, purple, turquoise, orange tones and feels cool overall. The strongest text pairing is #3E2B21 on #E8C1AE with a contrast ratio of 8.06:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
English Walnut	rgb(62, 43, 33)	hsl(21, 31%, 19%)
Nightly Walk	rgb(76, 69, 101)	hsl(253, 19%, 33%)
Turquoise Tortoise	rgb(76, 129, 108)	hsl(156, 26%, 40%)
Yucca	rgb(121, 152, 138)	hsl(153, 13%, 54%)
Imperial Lilac	rgb(165, 165, 203)	hsl(240, 27%, 72%)
Mellow Marrow	rgb(232, 193, 174)	hsl(20, 56%, 80%)

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.06:1 Very good#3E2B21 on #E8C1AE
Aa8.06:1 Very good#E8C1AE on #3E2B21
Aa5.62:1 Good#3E2B21 on #A5A5CB
Aa5.62:1 Good#A5A5CB on #3E2B21
Aa5.40:1 Good#4C4565 on #E8C1AE
Aa5.40:1 Good#E8C1AE on #4C4565
Aa4.24:1 Poor#3E2B21 on #79988A
Aa4.24:1 Poor#79988A on #3E2B21

Color blindness preview

CSS variables

/* English Walnut to Mellow Marrow — https://swatchly.xyz/palette/3e2b21-4c4565-4c816c-79988a-a5a5cb-e8c1ae */
:root {
  --english-walnut: #3e2b21;
  --nightly-walk: #4c4565;
  --turquoise-tortoise: #4c816c;
  --yucca: #79988a;
  --imperial-lilac: #a5a5cb;
  --mellow-marrow: #e8c1ae;
}

Tailwind CSS v4

/* English Walnut to Mellow Marrow — https://swatchly.xyz/palette/3e2b21-4c4565-4c816c-79988a-a5a5cb-e8c1ae */
@theme {
  --color-english-walnut: #3e2b21;
  --color-english-walnut-50: #fff2ec;
  --color-english-walnut-100: #f7e8df;
  --color-english-walnut-200: #e6d3ca;
  --color-english-walnut-300: #d1bcb1;
  --color-english-walnut-400: #b29c90;
  --color-english-walnut-500: #968074;
  --color-english-walnut-600: #7a655a;
  --color-english-walnut-700: #624e45;
  --color-english-walnut-800: #4c3c33;
  --color-english-walnut-900: #3e2b21;
  --color-english-walnut-950: #241b16;
  --color-nightly-walk: #4c4565;
  --color-nightly-walk-50: #f5f3ff;
  --color-nightly-walk-100: #ece8ff;
  --color-nightly-walk-200: #d8d3f0;
  --color-nightly-walk-300: #c4bede;
  --color-nightly-walk-400: #a69fc2;
  --color-nightly-walk-500: #8c85a8;
  --color-nightly-walk-600: #736c8e;
  --color-nightly-walk-700: #5e5777;
  --color-nightly-walk-800: #4c4565;
  --color-nightly-walk-900: #3a354d;
  --color-nightly-walk-950: #252133;
  --color-turquoise-tortoise: #4c816c;
  --color-turquoise-tortoise-50: #dffdf0;
  --color-turquoise-tortoise-100: #d5f6e7;
  --color-turquoise-tortoise-200: #bee5d4;
  --color-turquoise-tortoise-300: #a4d2be;
  --color-turquoise-tortoise-400: #82b59f;
  --color-turquoise-tortoise-500: #669b85;
  --color-turquoise-tortoise-600: #4c816c;
  --color-turquoise-tortoise-700: #366854;
  --color-turquoise-tortoise-800: #255241;
  --color-turquoise-tortoise-900: #193f31;
  --color-turquoise-tortoise-950: #0c281d;
  --color-yucca: #79988a;
  --color-yucca-50: #eafcf3;
  --color-yucca-100: #e1f4eb;
  --color-yucca-200: #cce3d8;
  --color-yucca-300: #b4cfc3;
  --color-yucca-400: #94b2a4;
  --color-yucca-500: #79988a;
  --color-yucca-600: #5d7b6e;
  --color-yucca-700: #476256;
  --color-yucca-800: #344d42;
  --color-yucca-900: #263b32;
  --color-yucca-950: #15241e;
  --color-imperial-lilac: #a5a5cb;
  --color-imperial-lilac-50: #f7f7ff;
  --color-imperial-lilac-100: #ededff;
  --color-imperial-lilac-200: #dadaf6;
  --color-imperial-lilac-300: #c4c4e4;
  --color-imperial-lilac-400: #a5a5cb;
  --color-imperial-lilac-500: #8888ad;
  --color-imperial-lilac-600: #6d6c8f;
  --color-imperial-lilac-700: #555575;
  --color-imperial-lilac-800: #42415d;
  --color-imperial-lilac-900: #323148;
  --color-imperial-lilac-950: #1e1d2e;
  --color-mellow-marrow: #e8c1ae;
  --color-mellow-marrow-50: #fff9f5;
  --color-mellow-marrow-100: #ffeee6;
  --color-mellow-marrow-200: #f5d9cc;
  --color-mellow-marrow-300: #e8c1ae;
  --color-mellow-marrow-400: #c4a18f;
  --color-mellow-marrow-500: #a78371;
  --color-mellow-marrow-600: #8a6756;
  --color-mellow-marrow-700: #6f5041;
  --color-mellow-marrow-800: #573d2f;
  --color-mellow-marrow-900: #432d22;
  --color-mellow-marrow-950: #2b1b13;
}