Memorial Black to Cappuccino color palette

061000Memorial Black 132100Midnight Pines 492803Chocolate Castle 3F4B2EPalm Leaf 724B41Cappuccino

About this palette

Memorial Black to Cappuccino is a 5-color dark, cool, earthy, gradient palette: #061000 (Memorial Black), #132100 (Midnight Pines), #492803 (Chocolate Castle), #3F4B2E (Palm Leaf), #724B41 (Cappuccino). It mixes black, green, brown, red tones and feels cool overall. The strongest text pairing is #061000 on #724B41 with a contrast ratio of 2.59:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Memorial Black	rgb(6, 16, 0)	hsl(98, 100%, 3%)
Midnight Pines	rgb(19, 33, 0)	hsl(85, 100%, 6%)
Chocolate Castle	rgb(73, 40, 3)	hsl(32, 92%, 15%)
Palm Leaf	rgb(63, 75, 46)	hsl(85, 24%, 24%)
Cappuccino	rgb(114, 75, 65)	hsl(12, 27%, 35%)

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

/* Memorial Black to Cappuccino — https://swatchly.xyz/palette/061000-132100-492803-3f4b2e-724b41 */
:root {
  --memorial-black: #061000;
  --midnight-pines: #132100;
  --chocolate-castle: #492803;
  --palm-leaf: #3f4b2e;
  --cappuccino: #724b41;
}

Tailwind CSS v4

/* Memorial Black to Cappuccino — https://swatchly.xyz/palette/061000-132100-492803-3f4b2e-724b41 */
@theme {
  --color-memorial-black: #061000;
  --color-memorial-black-50: #eff9e8;
  --color-memorial-black-100: #e5efdd;
  --color-memorial-black-200: #d0dcc7;
  --color-memorial-black-300: #b8c6ae;
  --color-memorial-black-400: #98a78d;
  --color-memorial-black-500: #79886d;
  --color-memorial-black-600: #5b6950;
  --color-memorial-black-700: #424e39;
  --color-memorial-black-800: #2e3826;
  --color-memorial-black-900: #1d2417;
  --color-memorial-black-950: #061000;
  --color-midnight-pines: #132100;
  --color-midnight-pines-50: #eefae3;
  --color-midnight-pines-100: #e3f1d7;
  --color-midnight-pines-200: #cedebf;
  --color-midnight-pines-300: #b7c8a5;
  --color-midnight-pines-400: #96a983;
  --color-midnight-pines-500: #7a8d66;
  --color-midnight-pines-600: #60714d;
  --color-midnight-pines-700: #4a5938;
  --color-midnight-pines-800: #384528;
  --color-midnight-pines-900: #29341c;
  --color-midnight-pines-950: #132100;
  --color-chocolate-castle: #492803;
  --color-chocolate-castle-50: #fff3e8;
  --color-chocolate-castle-100: #ffe6d1;
  --color-chocolate-castle-200: #f0d1b6;
  --color-chocolate-castle-300: #ddb99a;
  --color-chocolate-castle-400: #bf9977;
  --color-chocolate-castle-500: #a37d5a;
  --color-chocolate-castle-600: #876241;
  --color-chocolate-castle-700: #6d4c2e;
  --color-chocolate-castle-800: #563a1f;
  --color-chocolate-castle-900: #492803;
  --color-chocolate-castle-950: #2b1a09;
  --color-palm-leaf: #3f4b2e;
  --color-palm-leaf-50: #f0f9e6;
  --color-palm-leaf-100: #e6efda;
  --color-palm-leaf-200: #d1dcc3;
  --color-palm-leaf-300: #bac7aa;
  --color-palm-leaf-400: #9ba989;
  --color-palm-leaf-500: #808e6e;
  --color-palm-leaf-600: #677456;
  --color-palm-leaf-700: #525d42;
  --color-palm-leaf-800: #3f4b2e;
  --color-palm-leaf-900: #313924;
  --color-palm-leaf-950: #1e2415;
  --color-cappuccino: #724b41;
  --color-cappuccino-50: #fff2ee;
  --color-cappuccino-100: #ffe4de;
  --color-cappuccino-200: #f2cfc6;
  --color-cappuccino-300: #deb7ad;
  --color-cappuccino-400: #c1978c;
  --color-cappuccino-500: #a67b70;
  --color-cappuccino-600: #8a6157;
  --color-cappuccino-700: #724b41;
  --color-cappuccino-800: #5a3a32;
  --color-cappuccino-900: #462c25;
  --color-cappuccino-950: #2d1a15;
}