Treetop Cathedral to Memorial Black Color Palette

About this palette

Treetop Cathedral to Memorial Black is a 4-color dark, earthy palette: #354706 (Treetop Cathedral), #3A1700 (Close but No Cigar), #725D0C (Coffee Adept), #080E00 (Memorial Black). It mixes green, brown, black tones and feels balanced overall. The strongest text pairing is #725D0C on #080E00 with a contrast ratio of 3.06:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Treetop Cathedral	rgb(53, 71, 6)	hsl(77, 84%, 15%)
Close but No Cigar	rgb(58, 23, 0)	hsl(24, 100%, 11%)
Coffee Adept	rgb(114, 93, 12)	hsl(48, 81%, 25%)
Memorial Black	rgb(8, 14, 0)	hsl(86, 100%, 3%)

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.06:1 Poor#725D0C on #080E00
Aa3.06:1 Poor#080E00 on #725D0C

Color blindness preview

CSS variables

/* Treetop Cathedral to Memorial Black — https://swatchly.xyz/palette/354706-3a1700-725d0c-080e00 */
:root {
  --treetop-cathedral: #354706;
  --close-but-no-cigar: #3a1700;
  --coffee-adept: #725d0c;
  --memorial-black: #080e00;
}

Tailwind CSS v4

/* Treetop Cathedral to Memorial Black — https://swatchly.xyz/palette/354706-3a1700-725d0c-080e00 */
@theme {
  --color-treetop-cathedral: #354706;
  --color-treetop-cathedral-50: #eefbd8;
  --color-treetop-cathedral-100: #e3f2cb;
  --color-treetop-cathedral-200: #cee0b1;
  --color-treetop-cathedral-300: #b5c994;
  --color-treetop-cathedral-400: #94aa6f;
  --color-treetop-cathedral-500: #788e52;
  --color-treetop-cathedral-600: #5e7238;
  --color-treetop-cathedral-700: #495a25;
  --color-treetop-cathedral-800: #354706;
  --color-treetop-cathedral-900: #29360e;
  --color-treetop-cathedral-950: #182105;
  --color-close-but-no-cigar: #3a1700;
  --color-close-but-no-cigar-50: #fff2eb;
  --color-close-but-no-cigar-100: #ffe5d7;
  --color-close-but-no-cigar-200: #f3cfbb;
  --color-close-but-no-cigar-300: #dfb7a0;
  --color-close-but-no-cigar-400: #c2977e;
  --color-close-but-no-cigar-500: #a77c62;
  --color-close-but-no-cigar-600: #8b624a;
  --color-close-but-no-cigar-700: #734d37;
  --color-close-but-no-cigar-800: #5d3c28;
  --color-close-but-no-cigar-900: #4a2e1d;
  --color-close-but-no-cigar-950: #3a1700;
  --color-coffee-adept: #725d0c;
  --color-coffee-adept-50: #fff5d5;
  --color-coffee-adept-100: #f9ebbf;
  --color-coffee-adept-200: #e9d9a5;
  --color-coffee-adept-300: #d7c489;
  --color-coffee-adept-400: #bba663;
  --color-coffee-adept-500: #a18c45;
  --color-coffee-adept-600: #88732a;
  --color-coffee-adept-700: #725d0c;
  --color-coffee-adept-800: #5a4801;
  --color-coffee-adept-900: #463700;
  --color-coffee-adept-950: #2c2200;
  --color-memorial-black: #080e00;
  --color-memorial-black-50: #f2f8e9;
  --color-memorial-black-100: #e7eedd;
  --color-memorial-black-200: #d3dbc7;
  --color-memorial-black-300: #bcc5ae;
  --color-memorial-black-400: #9ca68d;
  --color-memorial-black-500: #7c866d;
  --color-memorial-black-600: #5f6750;
  --color-memorial-black-700: #454d39;
  --color-memorial-black-800: #303626;
  --color-memorial-black-900: #1e2317;
  --color-memorial-black-950: #080e00;
}