Dwarf Fortress to Think Brick color palette

200500Dwarf Fortress 390719Chocolate Kiss 570D39Soul Anchor 4C3254Shadow Purple 852212Minotaurus Brown 824B47Think Brick

Open in generator Export PNG, PDF, ASE…

About this palette

Dwarf Fortress to Think Brick is a 6-color dark, warm palette: #200500 (Dwarf Fortress), #390719 (Chocolate Kiss), #570D39 (Soul Anchor), #4C3254 (Shadow Purple), #852212 (Minotaurus Brown), #824B47 (Think Brick). It mixes black, red, purple tones and feels warm overall. The strongest text pairing is #200500 on #824B47 with a contrast ratio of 2.81:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Dwarf Fortress	rgb(32, 5, 0)	hsl(9, 100%, 6%)
Chocolate Kiss	rgb(57, 7, 25)	hsl(338, 78%, 13%)
Soul Anchor	rgb(87, 13, 57)	hsl(324, 74%, 20%)
Shadow Purple	rgb(76, 50, 84)	hsl(286, 25%, 26%)
Minotaurus Brown	rgb(133, 34, 18)	hsl(8, 76%, 30%)
Think Brick	rgb(130, 75, 71)	hsl(4, 29%, 39%)

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 Think Brick — https://swatchly.xyz/palette/200500-390719-570d39-4c3254-852212-824b47 */
:root {
  --dwarf-fortress: #200500;
  --chocolate-kiss: #390719;
  --soul-anchor: #570d39;
  --shadow-purple: #4c3254;
  --minotaurus-brown: #852212;
  --think-brick: #824b47;
}

Tailwind CSS v4

/* Dwarf Fortress to Think Brick — https://swatchly.xyz/palette/200500-390719-570d39-4c3254-852212-824b47 */
@theme {
  --color-dwarf-fortress: #200500;
  --color-dwarf-fortress-50: #fff2ed;
  --color-dwarf-fortress-100: #ffe5dc;
  --color-dwarf-fortress-200: #efd0c5;
  --color-dwarf-fortress-300: #dbb8ac;
  --color-dwarf-fortress-400: #be988a;
  --color-dwarf-fortress-500: #9e786b;
  --color-dwarf-fortress-600: #7e5b4f;
  --color-dwarf-fortress-700: #614338;
  --color-dwarf-fortress-800: #472f26;
  --color-dwarf-fortress-900: #311e18;
  --color-dwarf-fortress-950: #200500;
  --color-chocolate-kiss: #390719;
  --color-chocolate-kiss-50: #fff1f4;
  --color-chocolate-kiss-100: #ffe3e9;
  --color-chocolate-kiss-200: #fac8d3;
  --color-chocolate-kiss-300: #e8afbc;
  --color-chocolate-kiss-400: #cb8e9c;
  --color-chocolate-kiss-500: #ae7280;
  --color-chocolate-kiss-600: #915866;
  --color-chocolate-kiss-700: #76424f;
  --color-chocolate-kiss-800: #5e313d;
  --color-chocolate-kiss-900: #49242e;
  --color-chocolate-kiss-950: #390719;
  --color-soul-anchor: #570d39;
  --color-soul-anchor-50: #fff1f7;
  --color-soul-anchor-100: #ffe2ef;
  --color-soul-anchor-200: #ffc4df;
  --color-soul-anchor-300: #f1a7ca;
  --color-soul-anchor-400: #d484ab;
  --color-soul-anchor-500: #b8678f;
  --color-soul-anchor-600: #994d74;
  --color-soul-anchor-700: #7d385c;
  --color-soul-anchor-800: #642848;
  --color-soul-anchor-900: #570d39;
  --color-soul-anchor-950: #320f22;
  --color-shadow-purple: #4c3254;
  --color-shadow-purple-50: #fcf1ff;
  --color-shadow-purple-100: #f7e3fd;
  --color-shadow-purple-200: #e5ceed;
  --color-shadow-purple-300: #d0b5d8;
  --color-shadow-purple-400: #b194ba;
  --color-shadow-purple-500: #94779d;
  --color-shadow-purple-600: #785d81;
  --color-shadow-purple-700: #5f4767;
  --color-shadow-purple-800: #4c3254;
  --color-shadow-purple-900: #39273e;
  --color-shadow-purple-950: #231727;
  --color-minotaurus-brown: #852212;
  --color-minotaurus-brown-50: #fff2ef;
  --color-minotaurus-brown-100: #ffe4df;
  --color-minotaurus-brown-200: #ffc9bd;
  --color-minotaurus-brown-300: #ffa998;
  --color-minotaurus-brown-400: #eb8470;
  --color-minotaurus-brown-500: #d06854;
  --color-minotaurus-brown-600: #b34e3c;
  --color-minotaurus-brown-700: #983a2a;
  --color-minotaurus-brown-800: #852212;
  --color-minotaurus-brown-900: #661d10;
  --color-minotaurus-brown-950: #450e06;
  --color-think-brick: #824b47;
  --color-think-brick-50: #fff2f0;
  --color-think-brick-100: #ffe4e1;
  --color-think-brick-200: #fcccc7;
  --color-think-brick-300: #eab4af;
  --color-think-brick-400: #cf948f;
  --color-think-brick-500: #b57a75;
  --color-think-brick-600: #99615c;
  --color-think-brick-700: #824b47;
  --color-think-brick-800: #673936;
  --color-think-brick-900: #522b28;
  --color-think-brick-950: #351917;
}