Sly Fox to Ethereal Espresso color palette

7D4B49Sly Fox 5C4440Death by Chocolate 150300Dark Matter 38011EVienna Roast 3A2820Ethereal Espresso

About this palette

Sly Fox to Ethereal Espresso is a 5-color dark, warm palette: #7D4B49 (Sly Fox), #5C4440 (Death by Chocolate), #150300 (Dark Matter), #38011E (Vienna Roast), #3A2820 (Ethereal Espresso). It mixes red, gray, black tones and feels warm overall. The strongest text pairing is #7D4B49 on #150300 with a contrast ratio of 2.85:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sly Fox	rgb(125, 75, 73)	hsl(2, 26%, 39%)
Death by Chocolate	rgb(92, 68, 64)	hsl(9, 18%, 31%)
Dark Matter	rgb(21, 3, 0)	hsl(9, 100%, 4%)
Vienna Roast	rgb(56, 1, 30)	hsl(328, 96%, 11%)
Ethereal Espresso	rgb(58, 40, 32)	hsl(18, 29%, 18%)

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.

Color blindness preview

CSS variables

/* Sly Fox to Ethereal Espresso — https://swatchly.xyz/palette/7d4b49-5c4440-150300-38011e-3a2820 */
:root {
  --sly-fox: #7d4b49;
  --death-by-chocolate: #5c4440;
  --dark-matter: #150300;
  --vienna-roast: #38011e;
  --ethereal-espresso: #3a2820;
}

Tailwind CSS v4

/* Sly Fox to Ethereal Espresso — https://swatchly.xyz/palette/7d4b49-5c4440-150300-38011e-3a2820 */
@theme {
  --color-sly-fox: #7d4b49;
  --color-sly-fox-50: #fff2f1;
  --color-sly-fox-100: #ffe4e2;
  --color-sly-fox-200: #f8ccc9;
  --color-sly-fox-300: #e6b5b2;
  --color-sly-fox-400: #cb9592;
  --color-sly-fox-500: #b07a77;
  --color-sly-fox-600: #94615e;
  --color-sly-fox-700: #7d4b49;
  --color-sly-fox-800: #633a38;
  --color-sly-fox-900: #4e2b2a;
  --color-sly-fox-950: #331919;
  --color-death-by-chocolate: #5c4440;
  --color-death-by-chocolate-50: #fff2ef;
  --color-death-by-chocolate-100: #f9e6e3;
  --color-death-by-chocolate-200: #e8d2ce;
  --color-death-by-chocolate-300: #d5bcb8;
  --color-death-by-chocolate-400: #b89e99;
  --color-death-by-chocolate-500: #9f847f;
  --color-death-by-chocolate-600: #856b66;
  --color-death-by-chocolate-700: #6e5652;
  --color-death-by-chocolate-800: #5c4440;
  --color-death-by-chocolate-900: #473431;
  --color-death-by-chocolate-950: #2e201e;
  --color-dark-matter: #150300;
  --color-dark-matter-50: #fff2ed;
  --color-dark-matter-100: #fbe6de;
  --color-dark-matter-200: #ead2c8;
  --color-dark-matter-300: #d6bab0;
  --color-dark-matter-400: #b89a8f;
  --color-dark-matter-500: #97796e;
  --color-dark-matter-600: #765b50;
  --color-dark-matter-700: #584138;
  --color-dark-matter-800: #3d2c25;
  --color-dark-matter-900: #271a15;
  --color-dark-matter-950: #150300;
  --color-vienna-roast: #38011e;
  --color-vienna-roast-50: #fff1f6;
  --color-vienna-roast-100: #ffe2ec;
  --color-vienna-roast-200: #fcc6da;
  --color-vienna-roast-300: #eaadc4;
  --color-vienna-roast-400: #cd8ba5;
  --color-vienna-roast-500: #b06e89;
  --color-vienna-roast-600: #92546d;
  --color-vienna-roast-700: #763f56;
  --color-vienna-roast-800: #5d2e42;
  --color-vienna-roast-900: #482031;
  --color-vienna-roast-950: #38011e;
  --color-ethereal-espresso: #3a2820;
  --color-ethereal-espresso-50: #fff2ed;
  --color-ethereal-espresso-100: #f7e8e1;
  --color-ethereal-espresso-200: #e5d3cb;
  --color-ethereal-espresso-300: #d0bcb3;
  --color-ethereal-espresso-400: #b19b91;
  --color-ethereal-espresso-500: #947e75;
  --color-ethereal-espresso-600: #78635a;
  --color-ethereal-espresso-700: #5e4c44;
  --color-ethereal-espresso-800: #493932;
  --color-ethereal-espresso-900: #3a2820;
  --color-ethereal-espresso-950: #211814;
}