Cold Press Coffee to Shadow Play Color Palette

About this palette

Cold Press Coffee to Shadow Play is a 5-color dark, warm, earthy palette: #71301C (Cold Press Coffee), #1C0E00 (Balsamico), #163B22 (Queen of Trees), #744F01 (Coffee Adept), #371200 (Shadow Play). It mixes brown, black, green tones and feels warm overall. The strongest text pairing is #1C0E00 on #744F01 with a contrast ratio of 2.57:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cold Press Coffee	rgb(113, 48, 28)	hsl(14, 60%, 28%)
Balsamico	rgb(28, 14, 0)	hsl(30, 100%, 5%)
Queen of Trees	rgb(22, 59, 34)	hsl(139, 46%, 16%)
Coffee Adept	rgb(116, 79, 1)	hsl(41, 98%, 23%)
Shadow Play	rgb(55, 18, 0)	hsl(20, 100%, 11%)

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

/* Cold Press Coffee to Shadow Play — https://swatchly.xyz/palette/71301c-1c0e00-163b22-744f01-371200 */
:root {
  --cold-press-coffee: #71301c;
  --balsamico: #1c0e00;
  --queen-of-trees: #163b22;
  --coffee-adept: #744f01;
  --shadow-play: #371200;
}

Tailwind CSS v4

/* Cold Press Coffee to Shadow Play — https://swatchly.xyz/palette/71301c-1c0e00-163b22-744f01-371200 */
@theme {
  --color-cold-press-coffee: #71301c;
  --color-cold-press-coffee-50: #fff2ee;
  --color-cold-press-coffee-100: #ffe5dd;
  --color-cold-press-coffee-200: #ffc9b9;
  --color-cold-press-coffee-300: #f2b09b;
  --color-cold-press-coffee-400: #d68e79;
  --color-cold-press-coffee-500: #bb735d;
  --color-cold-press-coffee-600: #9e5945;
  --color-cold-press-coffee-700: #844532;
  --color-cold-press-coffee-800: #71301c;
  --color-cold-press-coffee-900: #562618;
  --color-cold-press-coffee-950: #38160c;
  --color-balsamico: #1c0e00;
  --color-balsamico-50: #fff3e6;
  --color-balsamico-100: #f6e9da;
  --color-balsamico-200: #e4d5c4;
  --color-balsamico-300: #cfbeaa;
  --color-balsamico-400: #b19e89;
  --color-balsamico-500: #92806a;
  --color-balsamico-600: #74634f;
  --color-balsamico-700: #594a38;
  --color-balsamico-800: #423527;
  --color-balsamico-900: #2e2419;
  --color-balsamico-950: #1c0e00;
  --color-queen-of-trees: #163b22;
  --color-queen-of-trees-50: #e5fcea;
  --color-queen-of-trees-100: #d9f3df;
  --color-queen-of-trees-200: #c2e1c9;
  --color-queen-of-trees-300: #a9cbb0;
  --color-queen-of-trees-400: #86ac8f;
  --color-queen-of-trees-500: #6a9174;
  --color-queen-of-trees-600: #50765a;
  --color-queen-of-trees-700: #3c5e45;
  --color-queen-of-trees-800: #2c4a34;
  --color-queen-of-trees-900: #163b22;
  --color-queen-of-trees-950: #112416;
  --color-coffee-adept: #744f01;
  --color-coffee-adept-50: #fff3e3;
  --color-coffee-adept-100: #ffe8c5;
  --color-coffee-adept-200: #f2d3a4;
  --color-coffee-adept-300: #dfbc86;
  --color-coffee-adept-400: #c29b5f;
  --color-coffee-adept-500: #a78040;
  --color-coffee-adept-600: #8b6625;
  --color-coffee-adept-700: #744f01;
  --color-coffee-adept-800: #5b3d00;
  --color-coffee-adept-900: #472f00;
  --color-coffee-adept-950: #2d1c00;
  --color-shadow-play: #371200;
  --color-shadow-play-50: #fff2ec;
  --color-shadow-play-100: #ffe5d9;
  --color-shadow-play-200: #f4cebd;
  --color-shadow-play-300: #e1b6a2;
  --color-shadow-play-400: #c49680;
  --color-shadow-play-500: #a87a64;
  --color-shadow-play-600: #8b604b;
  --color-shadow-play-700: #714a37;
  --color-shadow-play-800: #5b3828;
  --color-shadow-play-900: #472a1c;
  --color-shadow-play-950: #371200;
}