Start generating

Red Rumour to Dwarf Fortress color palette

6C3B42Red Rumour361527Chocolate Kiss6F6638Jungle Civilization442200Chocolate Castle220600Dwarf Fortress
Open in generator Export PNG, PDF, ASE…

About this palette

Red Rumour to Dwarf Fortress is a 5-color dark, warm, earthy palette: #6C3B42 (Red Rumour), #361527 (Chocolate Kiss), #6F6638 (Jungle Civilization), #442200 (Chocolate Castle), #220600 (Dwarf Fortress). It mixes brown, red, black tones and feels warm overall. The strongest text pairing is #6F6638 on #220600 with a contrast ratio of 3.32:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Red Rumourrgb(108, 59, 66)hsl(351, 29%, 33%)
Chocolate Kissrgb(54, 21, 39)hsl(327, 44%, 15%)
Jungle Civilizationrgb(111, 102, 56)hsl(50, 33%, 33%)
Chocolate Castlergb(68, 34, 0)hsl(30, 100%, 13%)
Dwarf Fortressrgb(34, 6, 0)hsl(11, 100%, 7%)

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.32:1 Poor#6F6638 on #220600
  • Aa3.32:1 Poor#220600 on #6F6638

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Red Rumour to Dwarf Fortress — https://swatchly.xyz/palette/6c3b42-361527-6f6638-442200-220600 */
:root {
  --red-rumour: #6c3b42;
  --chocolate-kiss: #361527;
  --jungle-civilization: #6f6638;
  --chocolate-castle: #442200;
  --dwarf-fortress: #220600;
}

Tailwind CSS v4

/* Red Rumour to Dwarf Fortress — https://swatchly.xyz/palette/6c3b42-361527-6f6638-442200-220600 */
@theme {
  --color-red-rumour: #6c3b42;
  --color-red-rumour-50: #fff1f2;
  --color-red-rumour-100: #ffe3e6;
  --color-red-rumour-200: #f6c8cd;
  --color-red-rumour-300: #e1aeb3;
  --color-red-rumour-400: #c28b91;
  --color-red-rumour-500: #a46e75;
  --color-red-rumour-600: #85535a;
  --color-red-rumour-700: #6c3b42;
  --color-red-rumour-800: #542e33;
  --color-red-rumour-900: #422227;
  --color-red-rumour-950: #2a1417;
  --color-chocolate-kiss: #361527;
  --color-chocolate-kiss-50: #fff1f7;
  --color-chocolate-kiss-100: #ffe2ef;
  --color-chocolate-kiss-200: #efccdc;
  --color-chocolate-kiss-300: #dbb4c6;
  --color-chocolate-kiss-400: #bd94a8;
  --color-chocolate-kiss-500: #a2798d;
  --color-chocolate-kiss-600: #875f73;
  --color-chocolate-kiss-700: #6e4a5c;
  --color-chocolate-kiss-800: #593949;
  --color-chocolate-kiss-900: #472c39;
  --color-chocolate-kiss-950: #361527;
  --color-jungle-civilization: #6f6638;
  --color-jungle-civilization-50: #fbf6db;
  --color-jungle-civilization-100: #f1ebcc;
  --color-jungle-civilization-200: #ddd6b1;
  --color-jungle-civilization-300: #c6be94;
  --color-jungle-civilization-400: #a79e70;
  --color-jungle-civilization-500: #8b8153;
  --color-jungle-civilization-600: #6f6638;
  --color-jungle-civilization-700: #595128;
  --color-jungle-civilization-800: #463f1b;
  --color-jungle-civilization-900: #363012;
  --color-jungle-civilization-950: #221e08;
  --color-chocolate-castle: #442200;
  --color-chocolate-castle-50: #fff3e9;
  --color-chocolate-castle-100: #ffe6d3;
  --color-chocolate-castle-200: #f1d0b7;
  --color-chocolate-castle-300: #deb99b;
  --color-chocolate-castle-400: #bf9777;
  --color-chocolate-castle-500: #a27a59;
  --color-chocolate-castle-600: #845f3f;
  --color-chocolate-castle-700: #69482c;
  --color-chocolate-castle-800: #52351d;
  --color-chocolate-castle-900: #442200;
  --color-chocolate-castle-950: #261608;
  --color-dwarf-fortress: #220600;
  --color-dwarf-fortress-50: #fff2ed;
  --color-dwarf-fortress-100: #ffe5db;
  --color-dwarf-fortress-200: #efd0c4;
  --color-dwarf-fortress-300: #dcb8ab;
  --color-dwarf-fortress-400: #be9889;
  --color-dwarf-fortress-500: #9f796a;
  --color-dwarf-fortress-600: #7f5c4f;
  --color-dwarf-fortress-700: #624438;
  --color-dwarf-fortress-800: #493026;
  --color-dwarf-fortress-900: #332018;
  --color-dwarf-fortress-950: #220600;
}

Similar palettes