Black Cherry to Cold Press Coffee Color Palette

About this palette

Black Cherry to Cold Press Coffee is a 4-color dark, warm palette: #301B20 (Black Cherry), #704568 (Magician’s Cloak), #270004 (Dwarf Fortress), #6E3203 (Cold Press Coffee). It mixes gray, pink, brown tones and feels warm overall. The strongest text pairing is #704568 on #270004 with a contrast ratio of 2.52:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Cherry	rgb(48, 27, 32)	hsl(346, 28%, 15%)
Magician’s Cloak	rgb(112, 69, 104)	hsl(311, 24%, 35%)
Dwarf Fortress	rgb(39, 0, 4)	hsl(354, 100%, 8%)
Cold Press Coffee	rgb(110, 50, 3)	hsl(26, 95%, 22%)

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

/* Black Cherry to Cold Press Coffee — https://swatchly.xyz/palette/301b20-704568-270004-6e3203 */
:root {
  --black-cherry: #301b20;
  --magician-s-cloak: #704568;
  --dwarf-fortress: #270004;
  --cold-press-coffee: #6e3203;
}

Tailwind CSS v4

/* Black Cherry to Cold Press Coffee — https://swatchly.xyz/palette/301b20-704568-270004-6e3203 */
@theme {
  --color-black-cherry: #301b20;
  --color-black-cherry-50: #fff1f4;
  --color-black-cherry-100: #f9e6e9;
  --color-black-cherry-200: #e7d1d5;
  --color-black-cherry-300: #d2babe;
  --color-black-cherry-400: #b4999f;
  --color-black-cherry-500: #9a7f84;
  --color-black-cherry-600: #7f656a;
  --color-black-cherry-700: #675055;
  --color-black-cherry-800: #523e42;
  --color-black-cherry-900: #413034;
  --color-black-cherry-950: #301b20;
  --color-magician-s-cloak: #704568;
  --color-magician-s-cloak-50: #fff0fb;
  --color-magician-s-cloak-100: #ffe0f8;
  --color-magician-s-cloak-200: #f0cae8;
  --color-magician-s-cloak-300: #dcb2d3;
  --color-magician-s-cloak-400: #bf91b5;
  --color-magician-s-cloak-500: #a4759a;
  --color-magician-s-cloak-600: #885b7f;
  --color-magician-s-cloak-700: #704568;
  --color-magician-s-cloak-800: #583551;
  --color-magician-s-cloak-900: #452840;
  --color-magician-s-cloak-950: #2c1728;
  --color-dwarf-fortress: #270004;
  --color-dwarf-fortress-50: #fff1f1;
  --color-dwarf-fortress-100: #ffe4e3;
  --color-dwarf-fortress-200: #f8cbca;
  --color-dwarf-fortress-300: #e5b2b1;
  --color-dwarf-fortress-400: #c89191;
  --color-dwarf-fortress-500: #a97272;
  --color-dwarf-fortress-600: #885656;
  --color-dwarf-fortress-700: #6a3e3e;
  --color-dwarf-fortress-800: #4f2b2b;
  --color-dwarf-fortress-900: #371c1c;
  --color-dwarf-fortress-950: #270004;
  --color-cold-press-coffee: #6e3203;
  --color-cold-press-coffee-50: #fff2eb;
  --color-cold-press-coffee-100: #ffe5d7;
  --color-cold-press-coffee-200: #ffcbad;
  --color-cold-press-coffee-300: #efb28f;
  --color-cold-press-coffee-400: #d3916b;
  --color-cold-press-coffee-500: #b8754e;
  --color-cold-press-coffee-600: #9b5c35;
  --color-cold-press-coffee-700: #814722;
  --color-cold-press-coffee-800: #6e3203;
  --color-cold-press-coffee-900: #53280a;
  --color-cold-press-coffee-950: #371703;
}