Treetop Cathedral to Monstera Color Palette

About this palette

Treetop Cathedral to Monstera is a 4-color dark, cool, earthy, monochromatic palette: #274612 (Treetop Cathedral), #001300 (Cosmic Bit Flip), #023519 (Haunted Hills), #536647 (Monstera). It mixes green, black tones and feels cool overall. The strongest text pairing is #001300 on #536647 with a contrast ratio of 3.07:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Treetop Cathedral	rgb(39, 70, 18)	hsl(96, 59%, 17%)
Cosmic Bit Flip	rgb(0, 19, 0)	hsl(120, 100%, 4%)
Haunted Hills	rgb(2, 53, 25)	hsl(147, 93%, 11%)
Monstera	rgb(83, 102, 71)	hsl(97, 18%, 34%)

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.07:1 Poor#001300 on #536647
Aa3.07:1 Poor#536647 on #001300

Color blindness preview

CSS variables

/* Treetop Cathedral to Monstera — https://swatchly.xyz/palette/274612-001300-023519-536647 */
:root {
  --treetop-cathedral: #274612;
  --cosmic-bit-flip: #001300;
  --haunted-hills: #023519;
  --monstera: #536647;
}

Tailwind CSS v4

/* Treetop Cathedral to Monstera — https://swatchly.xyz/palette/274612-001300-023519-536647 */
@theme {
  --color-treetop-cathedral: #274612;
  --color-treetop-cathedral-50: #e8fddd;
  --color-treetop-cathedral-100: #dcf4d0;
  --color-treetop-cathedral-200: #c6e2b7;
  --color-treetop-cathedral-300: #abcb9b;
  --color-treetop-cathedral-400: #89ab76;
  --color-treetop-cathedral-500: #6c8f59;
  --color-treetop-cathedral-600: #527240;
  --color-treetop-cathedral-700: #3d5a2c;
  --color-treetop-cathedral-800: #274612;
  --color-treetop-cathedral-900: #203514;
  --color-treetop-cathedral-950: #122009;
  --color-cosmic-bit-flip: #001300;
  --color-cosmic-bit-flip-50: #eafbe8;
  --color-cosmic-bit-flip-100: #dff1dd;
  --color-cosmic-bit-flip-200: #c9dfc6;
  --color-cosmic-bit-flip-300: #b0c9ad;
  --color-cosmic-bit-flip-400: #8faa8c;
  --color-cosmic-bit-flip-500: #6f8b6d;
  --color-cosmic-bit-flip-600: #536c50;
  --color-cosmic-bit-flip-700: #3b5239;
  --color-cosmic-bit-flip-800: #283a27;
  --color-cosmic-bit-flip-900: #192718;
  --color-cosmic-bit-flip-950: #001300;
  --color-haunted-hills: #023519;
  --color-haunted-hills-50: #e2fde9;
  --color-haunted-hills-100: #d6f4dd;
  --color-haunted-hills-200: #bee2c7;
  --color-haunted-hills-300: #a3cdaf;
  --color-haunted-hills-400: #7fad8c;
  --color-haunted-hills-500: #61906f;
  --color-haunted-hills-600: #467354;
  --color-haunted-hills-700: #315a3f;
  --color-haunted-hills-800: #21442d;
  --color-haunted-hills-900: #023519;
  --color-haunted-hills-950: #0a1e11;
  --color-monstera: #536647;
  --color-monstera-50: #edfae6;
  --color-monstera-100: #e2f0da;
  --color-monstera-200: #cfdfc6;
  --color-monstera-300: #b9cbae;
  --color-monstera-400: #9aae8e;
  --color-monstera-500: #809574;
  --color-monstera-600: #687b5c;
  --color-monstera-700: #536647;
  --color-monstera-800: #405036;
  --color-monstera-900: #303e27;
  --color-monstera-950: #1d2717;
}