Dwarf Fortress to Hot Brown color palette

170500Dwarf Fortress 5F3600Brown 002E0BHaunted Forest 26391EDarkest Forest 994421Hot Brown

About this palette

Dwarf Fortress to Hot Brown is a 5-color dark, warm, earthy palette: #170500 (Dwarf Fortress), #5F3600 (Brown), #002E0B (Haunted Forest), #26391E (Darkest Forest), #994421 (Hot Brown). It mixes black, brown, green tones and feels warm overall. The strongest text pairing is #170500 on #994421 with a contrast ratio of 3.03:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Dwarf Fortress	rgb(23, 5, 0)	hsl(13, 100%, 5%)
Brown	rgb(95, 54, 0)	hsl(34, 100%, 19%)
Haunted Forest	rgb(0, 46, 11)	hsl(134, 100%, 9%)
Darkest Forest	rgb(38, 57, 30)	hsl(102, 31%, 17%)
Hot Brown	rgb(153, 68, 33)	hsl(17, 65%, 36%)

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.

Aa3.03:1 Poor#170500 on #994421
Aa3.03:1 Poor#994421 on #170500

Color blindness preview

CSS variables

/* Dwarf Fortress to Hot Brown — https://swatchly.xyz/palette/170500-5f3600-002e0b-26391e-994421 */
:root {
  --dwarf-fortress: #170500;
  --brown: #5f3600;
  --haunted-forest: #002e0b;
  --darkest-forest: #26391e;
  --hot-brown: #994421;
}

Tailwind CSS v4

/* Dwarf Fortress to Hot Brown — https://swatchly.xyz/palette/170500-5f3600-002e0b-26391e-994421 */
@theme {
  --color-dwarf-fortress: #170500;
  --color-dwarf-fortress-50: #fff2ec;
  --color-dwarf-fortress-100: #fae7dd;
  --color-dwarf-fortress-200: #e9d2c7;
  --color-dwarf-fortress-300: #d4bbae;
  --color-dwarf-fortress-400: #b69b8d;
  --color-dwarf-fortress-500: #967b6d;
  --color-dwarf-fortress-600: #765d50;
  --color-dwarf-fortress-700: #584338;
  --color-dwarf-fortress-800: #3f2e25;
  --color-dwarf-fortress-900: #291d16;
  --color-dwarf-fortress-950: #170500;
  --color-brown: #5f3600;
  --color-brown-50: #fff3e8;
  --color-brown-100: #ffe6d0;
  --color-brown-200: #f5d0ad;
  --color-brown-300: #e2b890;
  --color-brown-400: #c4976b;
  --color-brown-500: #a97b4d;
  --color-brown-600: #8c6034;
  --color-brown-700: #724a21;
  --color-brown-800: #5f3600;
  --color-brown-900: #472a0a;
  --color-brown-950: #2e1903;
  --color-haunted-forest: #002e0b;
  --color-haunted-forest-50: #e3fee5;
  --color-haunted-forest-100: #d7f5d9;
  --color-haunted-forest-200: #bfe2c2;
  --color-haunted-forest-300: #a5cda9;
  --color-haunted-forest-400: #83af87;
  --color-haunted-forest-500: #67946c;
  --color-haunted-forest-600: #4f7a54;
  --color-haunted-forest-700: #3b6340;
  --color-haunted-forest-800: #2c5031;
  --color-haunted-forest-900: #214025;
  --color-haunted-forest-950: #002e0b;
  --color-darkest-forest: #26391e;
  --color-darkest-forest-50: #ecfae7;
  --color-darkest-forest-100: #e1f1dc;
  --color-darkest-forest-200: #ccdec5;
  --color-darkest-forest-300: #b4c8ac;
  --color-darkest-forest-400: #93a98b;
  --color-darkest-forest-500: #788e6f;
  --color-darkest-forest-600: #5e7356;
  --color-darkest-forest-700: #495c41;
  --color-darkest-forest-800: #374831;
  --color-darkest-forest-900: #26391e;
  --color-darkest-forest-950: #192315;
  --color-hot-brown: #994421;
  --color-hot-brown-50: #fff2ed;
  --color-hot-brown-100: #ffe2d7;
  --color-hot-brown-200: #ffc4ae;
  --color-hot-brown-300: #f7a384;
  --color-hot-brown-400: #d87f5d;
  --color-hot-brown-500: #b9613e;
  --color-hot-brown-600: #994421;
  --color-hot-brown-700: #7c3314;
  --color-hot-brown-800: #642509;
  --color-hot-brown-900: #501b03;
  --color-hot-brown-950: #350e01;
}