Start generating

Hot Brown to Deep Forestial Escapade color palette

963C11Hot Brown3E1A00Medium Roast1C0005Dwarf Fortress4D3300Moelleux au Chocolat395313Deep Forestial Escapade
Open in generator Export PNG, PDF, ASE…

About this palette

Hot Brown to Deep Forestial Escapade is a 5-color dark, warm, earthy palette: #963C11 (Hot Brown), #3E1A00 (Medium Roast), #1C0005 (Dwarf Fortress), #4D3300 (Moelleux au Chocolat), #395313 (Deep Forestial Escapade). It mixes brown, black, green tones and feels warm overall. The strongest text pairing is #963C11 on #1C0005 with a contrast ratio of 2.81:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Hot Brownrgb(150, 60, 17)hsl(19, 80%, 33%)
Medium Roastrgb(62, 26, 0)hsl(25, 100%, 12%)
Dwarf Fortressrgb(28, 0, 5)hsl(349, 100%, 5%)
Moelleux au Chocolatrgb(77, 51, 0)hsl(40, 100%, 15%)
Deep Forestial Escapadergb(57, 83, 19)hsl(84, 63%, 20%)

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

    • Protanopia
    • Deuteranopia
    • Tritanopia
    • Achromatopsia
    • Dog vision

    CSS variables

    /* Hot Brown to Deep Forestial Escapade — https://swatchly.xyz/palette/963c11-3e1a00-1c0005-4d3300-395313 */
:root {
  --hot-brown: #963c11;
  --medium-roast: #3e1a00;
  --dwarf-fortress: #1c0005;
  --moelleux-au-chocolat: #4d3300;
  --deep-forestial-escapade: #395313;
}

    Tailwind CSS v4

    /* Hot Brown to Deep Forestial Escapade — https://swatchly.xyz/palette/963c11-3e1a00-1c0005-4d3300-395313 */
@theme {
  --color-hot-brown: #963c11;
  --color-hot-brown-50: #fff2ed;
  --color-hot-brown-100: #ffe5db;
  --color-hot-brown-200: #ffccb8;
  --color-hot-brown-300: #ffac8c;
  --color-hot-brown-400: #e68964;
  --color-hot-brown-500: #cc6d46;
  --color-hot-brown-600: #af532d;
  --color-hot-brown-700: #963c11;
  --color-hot-brown-800: #782d07;
  --color-hot-brown-900: #5f1f00;
  --color-hot-brown-950: #3f1100;
  --color-medium-roast: #3e1a00;
  --color-medium-roast-50: #fff2eb;
  --color-medium-roast-100: #ffe5d6;
  --color-medium-roast-200: #f3cfba;
  --color-medium-roast-300: #e0b79f;
  --color-medium-roast-400: #c3977c;
  --color-medium-roast-500: #a87c61;
  --color-medium-roast-600: #8d6349;
  --color-medium-roast-700: #754f37;
  --color-medium-roast-800: #603e28;
  --color-medium-roast-900: #4e301d;
  --color-medium-roast-950: #3e1a00;
  --color-dwarf-fortress: #1c0005;
  --color-dwarf-fortress-50: #fff1f3;
  --color-dwarf-fortress-100: #ffe3e6;
  --color-dwarf-fortress-200: #f2cdd1;
  --color-dwarf-fortress-300: #dfb4b9;
  --color-dwarf-fortress-400: #c19499;
  --color-dwarf-fortress-500: #a17379;
  --color-dwarf-fortress-600: #7f565b;
  --color-dwarf-fortress-700: #603d42;
  --color-dwarf-fortress-800: #45292d;
  --color-dwarf-fortress-900: #2d191b;
  --color-dwarf-fortress-950: #1c0005;
  --color-moelleux-au-chocolat: #4d3300;
  --color-moelleux-au-chocolat-50: #fff3e3;
  --color-moelleux-au-chocolat-100: #fce8cb;
  --color-moelleux-au-chocolat-200: #ebd4b1;
  --color-moelleux-au-chocolat-300: #d7bd95;
  --color-moelleux-au-chocolat-400: #bb9e72;
  --color-moelleux-au-chocolat-500: #a18356;
  --color-moelleux-au-chocolat-600: #866a3e;
  --color-moelleux-au-chocolat-700: #6f552b;
  --color-moelleux-au-chocolat-800: #5a431d;
  --color-moelleux-au-chocolat-900: #4d3300;
  --color-moelleux-au-chocolat-950: #302108;
  --color-deep-forestial-escapade: #395313;
  --color-deep-forestial-escapade-50: #eafdd8;
  --color-deep-forestial-escapade-100: #dff4ca;
  --color-deep-forestial-escapade-200: #c9e1b0;
  --color-deep-forestial-escapade-300: #b2cd96;
  --color-deep-forestial-escapade-400: #93b073;
  --color-deep-forestial-escapade-500: #789657;
  --color-deep-forestial-escapade-600: #607c3e;
  --color-deep-forestial-escapade-700: #4b652b;
  --color-deep-forestial-escapade-800: #395313;
  --color-deep-forestial-escapade-900: #2c4012;
  --color-deep-forestial-escapade-950: #1a2907;
}

    Similar palettes