Dwarf Fortress to Hibernation Color Palette

About this palette

Dwarf Fortress to Hibernation is a 4-color dark, warm palette: #200300 (Dwarf Fortress), #331900 (Close but No Cigar), #453569 (Meteorite), #6B5364 (Hibernation). It mixes black, brown, purple, pink tones and feels warm overall. The strongest text pairing is #200300 on #6B5364 with a contrast ratio of 2.84:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Dwarf Fortress	rgb(32, 3, 0)	hsl(6, 100%, 6%)
Close but No Cigar	rgb(51, 25, 0)	hsl(29, 100%, 10%)
Meteorite	rgb(69, 53, 105)	hsl(258, 33%, 31%)
Hibernation	rgb(107, 83, 100)	hsl(318, 13%, 37%)

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 Hibernation — https://swatchly.xyz/palette/200300-331900-453569-6b5364 */
:root {
  --dwarf-fortress: #200300;
  --close-but-no-cigar: #331900;
  --meteorite: #453569;
  --hibernation: #6b5364;
}

Tailwind CSS v4

/* Dwarf Fortress to Hibernation — https://swatchly.xyz/palette/200300-331900-453569-6b5364 */
@theme {
  --color-dwarf-fortress: #200300;
  --color-dwarf-fortress-50: #fff2ee;
  --color-dwarf-fortress-100: #ffe5dd;
  --color-dwarf-fortress-200: #f1cfc5;
  --color-dwarf-fortress-300: #deb7ac;
  --color-dwarf-fortress-400: #c0968b;
  --color-dwarf-fortress-500: #a0776b;
  --color-dwarf-fortress-600: #80594f;
  --color-dwarf-fortress-700: #624138;
  --color-dwarf-fortress-800: #482d26;
  --color-dwarf-fortress-900: #311d17;
  --color-dwarf-fortress-950: #200300;
  --color-close-but-no-cigar: #331900;
  --color-close-but-no-cigar-50: #fff3e9;
  --color-close-but-no-cigar-100: #fde7d4;
  --color-close-but-no-cigar-200: #ecd2bc;
  --color-close-but-no-cigar-300: #d8bba2;
  --color-close-but-no-cigar-400: #bb9a7f;
  --color-close-but-no-cigar-500: #a07f64;
  --color-close-but-no-cigar-600: #84654b;
  --color-close-but-no-cigar-700: #6b4f37;
  --color-close-but-no-cigar-800: #563d28;
  --color-close-but-no-cigar-900: #442f1d;
  --color-close-but-no-cigar-950: #331900;
  --color-meteorite: #453569;
  --color-meteorite-50: #f6f3ff;
  --color-meteorite-100: #ede7ff;
  --color-meteorite-200: #dbcffe;
  --color-meteorite-300: #c4b7ec;
  --color-meteorite-400: #a596d0;
  --color-meteorite-500: #8a7ab4;
  --color-meteorite-600: #6f6096;
  --color-meteorite-700: #584a7b;
  --color-meteorite-800: #453569;
  --color-meteorite-900: #342a4e;
  --color-meteorite-950: #201932;
  --color-hibernation: #6b5364;
  --color-hibernation-50: #fff0fa;
  --color-hibernation-100: #f7e5f1;
  --color-hibernation-200: #e6d2e0;
  --color-hibernation-300: #d3bbcb;
  --color-hibernation-400: #b69cae;
  --color-hibernation-500: #9c8294;
  --color-hibernation-600: #81697a;
  --color-hibernation-700: #6b5364;
  --color-hibernation-800: #54404e;
  --color-hibernation-900: #41313d;
  --color-hibernation-950: #2a1e26;
}