Memorial Black to Monstera Color Palette

About this palette

Memorial Black to Monstera is a 4-color dark, cool, gradient palette: #0C1500 (Memorial Black), #002637 (Midnight Dreams), #334534 (Palm Leaf), #516852 (Monstera). It mixes black, blue, green tones and feels cool overall. The strongest text pairing is #0C1500 on #516852 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
Memorial Black	rgb(12, 21, 0)	hsl(86, 100%, 4%)
Midnight Dreams	rgb(0, 38, 55)	hsl(199, 100%, 11%)
Palm Leaf	rgb(51, 69, 52)	hsl(123, 15%, 24%)
Monstera	rgb(81, 104, 82)	hsl(123, 12%, 36%)

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#0C1500 on #516852
Aa3.07:1 Poor#516852 on #0C1500

Color blindness preview

CSS variables

/* Memorial Black to Monstera — https://swatchly.xyz/palette/0c1500-002637-334534-516852 */
:root {
  --memorial-black: #0c1500;
  --midnight-dreams: #002637;
  --palm-leaf: #334534;
  --monstera: #516852;
}

Tailwind CSS v4

/* Memorial Black to Monstera — https://swatchly.xyz/palette/0c1500-002637-334534-516852 */
@theme {
  --color-memorial-black: #0c1500;
  --color-memorial-black-50: #f0f9e7;
  --color-memorial-black-100: #e6efdb;
  --color-memorial-black-200: #d1dcc4;
  --color-memorial-black-300: #bac6ab;
  --color-memorial-black-400: #9aa789;
  --color-memorial-black-500: #7c896b;
  --color-memorial-black-600: #5f6b4f;
  --color-memorial-black-700: #475139;
  --color-memorial-black-800: #333c27;
  --color-memorial-black-900: #222919;
  --color-memorial-black-950: #0c1500;
  --color-midnight-dreams: #002637;
  --color-midnight-dreams-50: #eaf7ff;
  --color-midnight-dreams-100: #d7f0fe;
  --color-midnight-dreams-200: #bfdded;
  --color-midnight-dreams-300: #a5c7d9;
  --color-midnight-dreams-400: #83a7bc;
  --color-midnight-dreams-500: #678da1;
  --color-midnight-dreams-600: #4e7286;
  --color-midnight-dreams-700: #3b5c6e;
  --color-midnight-dreams-800: #2b4959;
  --color-midnight-dreams-900: #203947;
  --color-midnight-dreams-950: #002637;
  --color-palm-leaf: #334534;
  --color-palm-leaf-50: #edf9ed;
  --color-palm-leaf-100: #e2f0e2;
  --color-palm-leaf-200: #cdddcd;
  --color-palm-leaf-300: #b4c6b5;
  --color-palm-leaf-400: #93a794;
  --color-palm-leaf-500: #778b78;
  --color-palm-leaf-600: #5d705e;
  --color-palm-leaf-700: #475848;
  --color-palm-leaf-800: #334534;
  --color-palm-leaf-900: #283429;
  --color-palm-leaf-950: #172018;
  --color-monstera: #516852;
  --color-monstera-50: #ebfaec;
  --color-monstera-100: #deeede;
  --color-monstera-200: #c6dac6;
  --color-monstera-300: #acc2ac;
  --color-monstera-400: #89a18a;
  --color-monstera-500: #6c846d;
  --color-monstera-600: #516852;
  --color-monstera-700: #3f5340;
  --color-monstera-800: #304131;
  --color-monstera-900: #243225;
  --color-monstera-950: #151f16;
}