Dwarf Fortress to Bison Color Palette

About this palette

Dwarf Fortress to Bison is a 5-color dark, warm, earthy, gradient palette: #250300 (Dwarf Fortress), #480025 (Dark Sanctuary), #352B00 (Secret Passage), #503940 (Vibrant Vine), #6D523D (Bison). It mixes brown, red, gray tones and feels warm overall. The strongest text pairing is #250300 on #6D523D with a contrast ratio of 2.68:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Dwarf Fortress	rgb(37, 3, 0)	hsl(5, 100%, 7%)
Dark Sanctuary	rgb(72, 0, 37)	hsl(329, 100%, 14%)
Secret Passage	rgb(53, 43, 0)	hsl(49, 100%, 10%)
Vibrant Vine	rgb(80, 57, 64)	hsl(342, 17%, 27%)
Bison	rgb(109, 82, 61)	hsl(26, 28%, 33%)

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 Bison — https://swatchly.xyz/palette/250300-480025-352b00-503940-6d523d */
:root {
  --dwarf-fortress: #250300;
  --dark-sanctuary: #480025;
  --secret-passage: #352b00;
  --vibrant-vine: #503940;
  --bison: #6d523d;
}

Tailwind CSS v4

/* Dwarf Fortress to Bison — https://swatchly.xyz/palette/250300-480025-352b00-503940-6d523d */
@theme {
  --color-dwarf-fortress: #250300;
  --color-dwarf-fortress-50: #fff2ee;
  --color-dwarf-fortress-100: #ffe4de;
  --color-dwarf-fortress-200: #f4cdc4;
  --color-dwarf-fortress-300: #e1b5ab;
  --color-dwarf-fortress-400: #c49589;
  --color-dwarf-fortress-500: #a4766a;
  --color-dwarf-fortress-600: #84594e;
  --color-dwarf-fortress-700: #674138;
  --color-dwarf-fortress-800: #4c2e26;
  --color-dwarf-fortress-900: #361e18;
  --color-dwarf-fortress-950: #250300;
  --color-dark-sanctuary: #480025;
  --color-dark-sanctuary-50: #fff1f5;
  --color-dark-sanctuary-100: #ffe2eb;
  --color-dark-sanctuary-200: #ffc5d8;
  --color-dark-sanctuary-300: #f2a8c2;
  --color-dark-sanctuary-400: #d586a2;
  --color-dark-sanctuary-500: #ba6b88;
  --color-dark-sanctuary-600: #9d526f;
  --color-dark-sanctuary-700: #833e59;
  --color-dark-sanctuary-800: #6b2e47;
  --color-dark-sanctuary-900: #572238;
  --color-dark-sanctuary-950: #480025;
  --color-secret-passage: #352b00;
  --color-secret-passage-50: #fcf5dd;
  --color-secret-passage-100: #f3ecd0;
  --color-secret-passage-200: #e0d8b7;
  --color-secret-passage-300: #cbc19c;
  --color-secret-passage-400: #aba077;
  --color-secret-passage-500: #8e835a;
  --color-secret-passage-600: #726840;
  --color-secret-passage-700: #59502c;
  --color-secret-passage-800: #443c1d;
  --color-secret-passage-900: #352b00;
  --color-secret-passage-950: #1e1a08;
  --color-vibrant-vine: #503940;
  --color-vibrant-vine-50: #fff1f5;
  --color-vibrant-vine-100: #f8e6eb;
  --color-vibrant-vine-200: #e7d1d7;
  --color-vibrant-vine-300: #d2b9c0;
  --color-vibrant-vine-400: #b399a0;
  --color-vibrant-vine-500: #977d85;
  --color-vibrant-vine-600: #7b636a;
  --color-vibrant-vine-700: #634d53;
  --color-vibrant-vine-800: #503940;
  --color-vibrant-vine-900: #3c2c31;
  --color-vibrant-vine-950: #261a1e;
  --color-bison: #6d523d;
  --color-bison-50: #fff3e9;
  --color-bison-100: #fbe7d8;
  --color-bison-200: #ebd3c1;
  --color-bison-300: #d7bca8;
  --color-bison-400: #ba9d87;
  --color-bison-500: #9f826c;
  --color-bison-600: #846853;
  --color-bison-700: #6d523d;
  --color-bison-800: #56402e;
  --color-bison-900: #433022;
  --color-bison-950: #2b1d13;
}