Dwarf Fortress to Ultrapurple Merge color palette

200005Dwarf Fortress 2D1219Black Cherry 222E6EAtlantic Navy 6F3470Eminence 684FA4Ultrapurple Merge

About this palette

Dwarf Fortress to Ultrapurple Merge is a 5-color dark, cool, gradient palette: #200005 (Dwarf Fortress), #2D1219 (Black Cherry), #222E6E (Atlantic Navy), #6F3470 (Eminence), #684FA4 (Ultrapurple Merge). It mixes brown, red, blue, purple tones and feels cool overall. The strongest text pairing is #200005 on #684FA4 with a contrast ratio of 3.05:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Dwarf Fortress	rgb(32, 0, 5)	hsl(351, 100%, 6%)
Black Cherry	rgb(45, 18, 25)	hsl(344, 43%, 12%)
Atlantic Navy	rgb(34, 46, 110)	hsl(231, 53%, 28%)
Eminence	rgb(111, 52, 112)	hsl(299, 37%, 32%)
Ultrapurple Merge	rgb(104, 79, 164)	hsl(258, 35%, 48%)

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.05:1 Poor#200005 on #684FA4
Aa3.05:1 Poor#684FA4 on #200005

Color blindness preview

CSS variables

/* Dwarf Fortress to Ultrapurple Merge — https://swatchly.xyz/palette/200005-2d1219-222e6e-6f3470-684fa4 */
:root {
  --dwarf-fortress: #200005;
  --black-cherry: #2d1219;
  --atlantic-navy: #222e6e;
  --eminence: #6f3470;
  --ultrapurple-merge: #684fa4;
}

Tailwind CSS v4

/* Dwarf Fortress to Ultrapurple Merge — https://swatchly.xyz/palette/200005-2d1219-222e6e-6f3470-684fa4 */
@theme {
  --color-dwarf-fortress: #200005;
  --color-dwarf-fortress-50: #fff1f2;
  --color-dwarf-fortress-100: #ffe3e5;
  --color-dwarf-fortress-200: #f4ccce;
  --color-dwarf-fortress-300: #e1b4b7;
  --color-dwarf-fortress-400: #c49396;
  --color-dwarf-fortress-500: #a47377;
  --color-dwarf-fortress-600: #825659;
  --color-dwarf-fortress-700: #643d41;
  --color-dwarf-fortress-800: #482a2d;
  --color-dwarf-fortress-900: #311a1c;
  --color-dwarf-fortress-950: #200005;
  --color-black-cherry: #2d1219;
  --color-black-cherry-50: #fff1f4;
  --color-black-cherry-100: #fde4e9;
  --color-black-cherry-200: #eccfd4;
  --color-black-cherry-300: #d8b7bd;
  --color-black-cherry-400: #ba979e;
  --color-black-cherry-500: #9e7a82;
  --color-black-cherry-600: #816067;
  --color-black-cherry-700: #684a50;
  --color-black-cherry-800: #51383d;
  --color-black-cherry-900: #3e292e;
  --color-black-cherry-950: #2d1219;
  --color-atlantic-navy: #222e6e;
  --color-atlantic-navy-50: #f1f5ff;
  --color-atlantic-navy-100: #e4ebff;
  --color-atlantic-navy-200: #c9d6ff;
  --color-atlantic-navy-300: #aabeff;
  --color-atlantic-navy-400: #899ee5;
  --color-atlantic-navy-500: #6f83cb;
  --color-atlantic-navy-600: #5668ad;
  --color-atlantic-navy-700: #425291;
  --color-atlantic-navy-800: #324077;
  --color-atlantic-navy-900: #222e6e;
  --color-atlantic-navy-950: #161e41;
  --color-eminence: #6f3470;
  --color-eminence-50: #ffeffe;
  --color-eminence-100: #ffdffe;
  --color-eminence-200: #f6c3f5;
  --color-eminence-300: #e1a8e1;
  --color-eminence-400: #c384c3;
  --color-eminence-500: #a667a6;
  --color-eminence-600: #884d88;
  --color-eminence-700: #6f3470;
  --color-eminence-800: #562957;
  --color-eminence-900: #441d45;
  --color-eminence-950: #2b102c;
  --color-ultrapurple-merge: #684fa4;
  --color-ultrapurple-merge-50: #f5f3ff;
  --color-ultrapurple-merge-100: #eae5ff;
  --color-ultrapurple-merge-200: #d6cbff;
  --color-ultrapurple-merge-300: #c0acfe;
  --color-ultrapurple-merge-400: #a089e1;
  --color-ultrapurple-merge-500: #836bc3;
  --color-ultrapurple-merge-600: #684fa4;
  --color-ultrapurple-merge-700: #533d86;
  --color-ultrapurple-merge-800: #412d6d;
  --color-ultrapurple-merge-900: #332258;
  --color-ultrapurple-merge-950: #20133a;
}