Dwarf Fortress to Root Beer Color Palette

About this palette

Dwarf Fortress to Root Beer is a 5-color dark, warm, earthy palette: #1B0800 (Dwarf Fortress), #231E00 (Midnight Pines), #1D3706 (Melancholia), #862E0D (Kobe), #815443 (Root Beer). It mixes black, brown, green, red tones and feels warm overall. The strongest text pairing is #1B0800 on #815443 with a contrast ratio of 3.04:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Dwarf Fortress	rgb(27, 8, 0)	hsl(18, 100%, 5%)
Midnight Pines	rgb(35, 30, 0)	hsl(51, 100%, 7%)
Melancholia	rgb(29, 55, 6)	hsl(92, 80%, 12%)
Kobe	rgb(134, 46, 13)	hsl(16, 82%, 29%)
Root Beer	rgb(129, 84, 67)	hsl(16, 32%, 38%)

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.04:1 Poor#1B0800 on #815443
Aa3.04:1 Poor#815443 on #1B0800

Color blindness preview

CSS variables

/* Dwarf Fortress to Root Beer — https://swatchly.xyz/palette/1b0800-231e00-1d3706-862e0d-815443 */
:root {
  --dwarf-fortress: #1b0800;
  --midnight-pines: #231e00;
  --melancholia: #1d3706;
  --kobe: #862e0d;
  --root-beer: #815443;
}

Tailwind CSS v4

/* Dwarf Fortress to Root Beer — https://swatchly.xyz/palette/1b0800-231e00-1d3706-862e0d-815443 */
@theme {
  --color-dwarf-fortress: #1b0800;
  --color-dwarf-fortress-50: #fff2eb;
  --color-dwarf-fortress-100: #fae7dc;
  --color-dwarf-fortress-200: #e8d3c5;
  --color-dwarf-fortress-300: #d4bbac;
  --color-dwarf-fortress-400: #b69b8b;
  --color-dwarf-fortress-500: #977c6c;
  --color-dwarf-fortress-600: #775f4f;
  --color-dwarf-fortress-700: #5b4638;
  --color-dwarf-fortress-800: #423126;
  --color-dwarf-fortress-900: #2d2018;
  --color-dwarf-fortress-950: #1b0800;
  --color-midnight-pines: #231e00;
  --color-midnight-pines-50: #f9f6e2;
  --color-midnight-pines-100: #efecd6;
  --color-midnight-pines-200: #dcd9be;
  --color-midnight-pines-300: #c7c2a4;
  --color-midnight-pines-400: #a8a381;
  --color-midnight-pines-500: #8c8765;
  --color-midnight-pines-600: #716c4c;
  --color-midnight-pines-700: #5a5538;
  --color-midnight-pines-800: #464228;
  --color-midnight-pines-900: #35321c;
  --color-midnight-pines-950: #231e00;
  --color-melancholia: #1d3706;
  --color-melancholia-50: #e9fcdf;
  --color-melancholia-100: #def3d2;
  --color-melancholia-200: #c8e1b9;
  --color-melancholia-300: #afcb9e;
  --color-melancholia-400: #8dac7b;
  --color-melancholia-500: #718f5e;
  --color-melancholia-600: #577344;
  --color-melancholia-700: #425b30;
  --color-melancholia-800: #304621;
  --color-melancholia-900: #1d3706;
  --color-melancholia-950: #14200b;
  --color-kobe: #862e0d;
  --color-kobe-50: #fff2ee;
  --color-kobe-100: #ffe5dc;
  --color-kobe-200: #ffc8b6;
  --color-kobe-300: #fca58a;
  --color-kobe-400: #df8163;
  --color-kobe-500: #c16345;
  --color-kobe-600: #a0482b;
  --color-kobe-700: #862e0d;
  --color-kobe-800: #68240c;
  --color-kobe-900: #531905;
  --color-kobe-950: #360d02;
  --color-root-beer: #815443;
  --color-root-beer-50: #fff2ed;
  --color-root-beer-100: #ffe2d7;
  --color-root-beer-200: #f2c9ba;
  --color-root-beer-300: #dcaf9e;
  --color-root-beer-400: #bd8d7b;
  --color-root-beer-500: #9f705e;
  --color-root-beer-600: #815443;
  --color-root-beer-700: #684133;
  --color-root-beer-800: #533225;
  --color-root-beer-900: #42261b;
  --color-root-beer-950: #2a160f;
}