Memorial Black to Muddy Olive color palette

0C1100Memorial Black 0F2100Midnight Pines 003E29Lost in the Woods 004B54Nocturnal Expedition 45624AMuddy Olive

Open in generator Export PNG, PDF, ASE…

About this palette

Memorial Black to Muddy Olive is a 5-color dark, cool, earthy, gradient palette: #0C1100 (Memorial Black), #0F2100 (Midnight Pines), #003E29 (Lost in the Woods), #004B54 (Nocturnal Expedition), #45624A (Muddy Olive). It mixes black, green, turquoise tones and feels cool overall. The strongest text pairing is #0C1100 on #45624A with a contrast ratio of 2.83:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Memorial Black	rgb(12, 17, 0)	hsl(78, 100%, 3%)
Midnight Pines	rgb(15, 33, 0)	hsl(93, 100%, 6%)
Lost in the Woods	rgb(0, 62, 41)	hsl(160, 100%, 12%)
Nocturnal Expedition	rgb(0, 75, 84)	hsl(186, 100%, 16%)
Muddy Olive	rgb(69, 98, 74)	hsl(130, 17%, 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.

Color blindness preview

CSS variables

/* Memorial Black to Muddy Olive — https://swatchly.xyz/palette/0c1100-0f2100-003e29-004b54-45624a */
:root {
  --memorial-black: #0c1100;
  --midnight-pines: #0f2100;
  --lost-in-the-woods: #003e29;
  --nocturnal-expedition: #004b54;
  --muddy-olive: #45624a;
}

Tailwind CSS v4

/* Memorial Black to Muddy Olive — https://swatchly.xyz/palette/0c1100-0f2100-003e29-004b54-45624a */
@theme {
  --color-memorial-black: #0c1100;
  --color-memorial-black-50: #f3f8e8;
  --color-memorial-black-100: #e8eedc;
  --color-memorial-black-200: #d4dbc6;
  --color-memorial-black-300: #bdc5ad;
  --color-memorial-black-400: #9da68b;
  --color-memorial-black-500: #7e876c;
  --color-memorial-black-600: #616850;
  --color-memorial-black-700: #484e39;
  --color-memorial-black-800: #333827;
  --color-memorial-black-900: #222618;
  --color-memorial-black-950: #0c1100;
  --color-midnight-pines: #0f2100;
  --color-midnight-pines-50: #ecfbe3;
  --color-midnight-pines-100: #e1f1d7;
  --color-midnight-pines-200: #ccdfbf;
  --color-midnight-pines-300: #b4c9a6;
  --color-midnight-pines-400: #93aa83;
  --color-midnight-pines-500: #778e67;
  --color-midnight-pines-600: #5c724d;
  --color-midnight-pines-700: #475a38;
  --color-midnight-pines-800: #354528;
  --color-midnight-pines-900: #26341c;
  --color-midnight-pines-950: #0f2100;
  --color-lost-in-the-woods: #003e29;
  --color-lost-in-the-woods-50: #dffeee;
  --color-lost-in-the-woods-100: #d2f5e3;
  --color-lost-in-the-woods-200: #bae3ce;
  --color-lost-in-the-woods-300: #9fcdb6;
  --color-lost-in-the-woods-400: #7baf96;
  --color-lost-in-the-woods-500: #5e947b;
  --color-lost-in-the-woods-600: #447961;
  --color-lost-in-the-woods-700: #30614b;
  --color-lost-in-the-woods-800: #214d3a;
  --color-lost-in-the-woods-900: #003e29;
  --color-lost-in-the-woods-950: #0a261a;
  --color-nocturnal-expedition: #004b54;
  --color-nocturnal-expedition-50: #e1fbff;
  --color-nocturnal-expedition-100: #cdf3fa;
  --color-nocturnal-expedition-200: #b3e1e8;
  --color-nocturnal-expedition-300: #97cbd4;
  --color-nocturnal-expedition-400: #72adb6;
  --color-nocturnal-expedition-500: #54919b;
  --color-nocturnal-expedition-600: #39767f;
  --color-nocturnal-expedition-700: #255e66;
  --color-nocturnal-expedition-800: #004b54;
  --color-nocturnal-expedition-900: #0c393f;
  --color-nocturnal-expedition-950: #042428;
  --color-muddy-olive: #45624a;
  --color-muddy-olive-50: #e9fbeb;
  --color-muddy-olive-100: #ddf2e0;
  --color-muddy-olive-200: #c8e0cb;
  --color-muddy-olive-300: #b0cbb4;
  --color-muddy-olive-400: #8fad94;
  --color-muddy-olive-500: #749279;
  --color-muddy-olive-600: #5b7860;
  --color-muddy-olive-700: #45624a;
  --color-muddy-olive-800: #354d39;
  --color-muddy-olive-900: #273b2b;
  --color-muddy-olive-950: #172519;
}