Dwarf Fortress to Botanical Color Palette

About this palette

Dwarf Fortress to Botanical is a 5-color dark, cool, earthy, gradient palette: #210903 (Dwarf Fortress), #222800 (Lindworm Green), #304103 (Dark Olive), #6C2F0F (Cold Press Coffee), #3F6925 (Botanical). It mixes black, green, brown tones and feels cool overall. The strongest text pairing is #210903 on #3F6925 with a contrast ratio of 2.95:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Dwarf Fortress	rgb(33, 9, 3)	hsl(12, 83%, 7%)
Lindworm Green	rgb(34, 40, 0)	hsl(69, 100%, 8%)
Dark Olive	rgb(48, 65, 3)	hsl(76, 91%, 13%)
Cold Press Coffee	rgb(108, 47, 15)	hsl(21, 76%, 24%)
Botanical	rgb(63, 105, 37)	hsl(97, 48%, 28%)

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

/* Dwarf Fortress to Botanical — https://swatchly.xyz/palette/210903-222800-304103-6c2f0f-3f6925 */
:root {
  --dwarf-fortress: #210903;
  --lindworm-green: #222800;
  --dark-olive: #304103;
  --cold-press-coffee: #6c2f0f;
  --botanical: #3f6925;
}

Tailwind CSS v4

/* Dwarf Fortress to Botanical — https://swatchly.xyz/palette/210903-222800-304103-6c2f0f-3f6925 */
@theme {
  --color-dwarf-fortress: #210903;
  --color-dwarf-fortress-50: #fff2ee;
  --color-dwarf-fortress-100: #fde6de;
  --color-dwarf-fortress-200: #ecd1c8;
  --color-dwarf-fortress-300: #d8b9af;
  --color-dwarf-fortress-400: #ba998e;
  --color-dwarf-fortress-500: #9b7a6f;
  --color-dwarf-fortress-600: #7c5e54;
  --color-dwarf-fortress-700: #60463d;
  --color-dwarf-fortress-800: #47322a;
  --color-dwarf-fortress-900: #32211c;
  --color-dwarf-fortress-950: #210903;
  --color-lindworm-green: #222800;
  --color-lindworm-green-50: #f3f9e0;
  --color-lindworm-green-100: #e8efd3;
  --color-lindworm-green-200: #d4dcbb;
  --color-lindworm-green-300: #bdc6a0;
  --color-lindworm-green-400: #9ea77e;
  --color-lindworm-green-500: #848d63;
  --color-lindworm-green-600: #6a734a;
  --color-lindworm-green-700: #555d37;
  --color-lindworm-green-800: #444a29;
  --color-lindworm-green-900: #353b1e;
  --color-lindworm-green-950: #222800;
  --color-dark-olive: #304103;
  --color-dark-olive-50: #eefbd9;
  --color-dark-olive-100: #e3f2cc;
  --color-dark-olive-200: #cedfb2;
  --color-dark-olive-300: #b6ca96;
  --color-dark-olive-400: #97ac74;
  --color-dark-olive-500: #7d9258;
  --color-dark-olive-600: #657840;
  --color-dark-olive-700: #50622d;
  --color-dark-olive-800: #3f4f20;
  --color-dark-olive-900: #304103;
  --color-dark-olive-950: #1f2909;
  --color-cold-press-coffee: #6c2f0f;
  --color-cold-press-coffee-50: #fff2ed;
  --color-cold-press-coffee-100: #ffe5da;
  --color-cold-press-coffee-200: #ffcab3;
  --color-cold-press-coffee-300: #efb195;
  --color-cold-press-coffee-400: #d38f71;
  --color-cold-press-coffee-500: #b77354;
  --color-cold-press-coffee-600: #9a593c;
  --color-cold-press-coffee-700: #7f4429;
  --color-cold-press-coffee-800: #6c2f0f;
  --color-cold-press-coffee-900: #512611;
  --color-cold-press-coffee-950: #351607;
  --color-botanical: #3f6925;
  --color-botanical-50: #e4ffd7;
  --color-botanical-100: #d8f6c9;
  --color-botanical-200: #c2e5b1;
  --color-botanical-300: #aad195;
  --color-botanical-400: #88b472;
  --color-botanical-500: #6d9a55;
  --color-botanical-600: #557f3c;
  --color-botanical-700: #3f6925;
  --color-botanical-800: #2f5219;
  --color-botanical-900: #22400e;
  --color-botanical-950: #132905;
}