Memorial Black to Jungle Civilization color palette

091600Memorial Black 212300Midnight Pines 053B14Melancholia 234C37Palm Leaf 67653FJungle Civilization

Open in generator Export PNG, PDF, ASE…

About this palette

Memorial Black to Jungle Civilization is a 5-color dark, cool, earthy palette: #091600 (Memorial Black), #212300 (Midnight Pines), #053B14 (Melancholia), #234C37 (Palm Leaf), #67653F (Jungle Civilization). It mixes black, green, brown tones and feels cool overall. The strongest text pairing is #091600 on #67653F with a contrast ratio of 3.12:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Memorial Black	rgb(9, 22, 0)	hsl(95, 100%, 4%)
Midnight Pines	rgb(33, 35, 0)	hsl(63, 100%, 7%)
Melancholia	rgb(5, 59, 20)	hsl(137, 84%, 13%)
Palm Leaf	rgb(35, 76, 55)	hsl(149, 37%, 22%)
Jungle Civilization	rgb(103, 101, 63)	hsl(57, 24%, 33%)

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.12:1 Poor#091600 on #67653F
Aa3.12:1 Poor#67653F on #091600

Color blindness preview

CSS variables

/* Memorial Black to Jungle Civilization — https://swatchly.xyz/palette/091600-212300-053b14-234c37-67653f */
:root {
  --memorial-black: #091600;
  --midnight-pines: #212300;
  --melancholia: #053b14;
  --palm-leaf: #234c37;
  --jungle-civilization: #67653f;
}

Tailwind CSS v4

/* Memorial Black to Jungle Civilization — https://swatchly.xyz/palette/091600-212300-053b14-234c37-67653f */
@theme {
  --color-memorial-black: #091600;
  --color-memorial-black-50: #eef9e6;
  --color-memorial-black-100: #e4f0db;
  --color-memorial-black-200: #cfddc4;
  --color-memorial-black-300: #b7c7ab;
  --color-memorial-black-400: #97a889;
  --color-memorial-black-500: #788a6b;
  --color-memorial-black-600: #5c6c4f;
  --color-memorial-black-700: #445339;
  --color-memorial-black-800: #313c27;
  --color-memorial-black-900: #212a19;
  --color-memorial-black-950: #091600;
  --color-midnight-pines: #212300;
  --color-midnight-pines-50: #f5f8e1;
  --color-midnight-pines-100: #ebeed5;
  --color-midnight-pines-200: #d7dbbd;
  --color-midnight-pines-300: #c1c5a2;
  --color-midnight-pines-400: #a1a580;
  --color-midnight-pines-500: #868a64;
  --color-midnight-pines-600: #6c704b;
  --color-midnight-pines-700: #565938;
  --color-midnight-pines-800: #434629;
  --color-midnight-pines-900: #34361d;
  --color-midnight-pines-950: #212300;
  --color-melancholia: #053b14;
  --color-melancholia-50: #e1fee4;
  --color-melancholia-100: #d5f6d8;
  --color-melancholia-200: #bce4c0;
  --color-melancholia-300: #a2cea6;
  --color-melancholia-400: #7eaf84;
  --color-melancholia-500: #619367;
  --color-melancholia-600: #47774e;
  --color-melancholia-700: #335f3a;
  --color-melancholia-800: #234a2a;
  --color-melancholia-900: #053b14;
  --color-melancholia-950: #0c2310;
  --color-palm-leaf: #234c37;
  --color-palm-leaf-50: #e4fced;
  --color-palm-leaf-100: #d7f3e3;
  --color-palm-leaf-200: #c0e1cd;
  --color-palm-leaf-300: #a6cbb5;
  --color-palm-leaf-400: #83ad95;
  --color-palm-leaf-500: #67917a;
  --color-palm-leaf-600: #4e7660;
  --color-palm-leaf-700: #395f4a;
  --color-palm-leaf-800: #234c37;
  --color-palm-leaf-900: #1e3a2b;
  --color-palm-leaf-950: #102419;
  --color-jungle-civilization: #67653f;
  --color-jungle-civilization-50: #f7f7e0;
  --color-jungle-civilization-100: #ecebd1;
  --color-jungle-civilization-200: #d7d6b7;
  --color-jungle-civilization-300: #c0be9a;
  --color-jungle-civilization-400: #9f9e77;
  --color-jungle-civilization-500: #83815a;
  --color-jungle-civilization-600: #67653f;
  --color-jungle-civilization-700: #52502f;
  --color-jungle-civilization-800: #403e22;
  --color-jungle-civilization-900: #323018;
  --color-jungle-civilization-950: #1f1e0c;
}