Start generating

Memorial Black to Forestial Outpost color palette

011A03Memorial Black291801Shadow Play00372CPitch-Black Forests065944Evergreen625F00Forestial Outpost
Open in generator Export PNG, PDF, ASE…

About this palette

Memorial Black to Forestial Outpost is a 5-color dark, cool, gradient palette: #011A03 (Memorial Black), #291801 (Shadow Play), #00372C (Pitch-Black Forests), #065944 (Evergreen), #625F00 (Forestial Outpost). It mixes black, brown, turquoise tones and feels cool overall. The strongest text pairing is #011A03 on #625F00 with a contrast ratio of 2.74:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Memorial Blackrgb(1, 26, 3)hsl(125, 93%, 5%)
Shadow Playrgb(41, 24, 1)hsl(34, 95%, 8%)
Pitch-Black Forestsrgb(0, 55, 44)hsl(168, 100%, 11%)
Evergreenrgb(6, 89, 68)hsl(165, 87%, 19%)
Forestial Outpostrgb(98, 95, 0)hsl(58, 100%, 19%)

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

    • Protanopia
    • Deuteranopia
    • Tritanopia
    • Achromatopsia
    • Dog vision

    CSS variables

    /* Memorial Black to Forestial Outpost — https://swatchly.xyz/palette/011a03-291801-00372c-065944-625f00 */
:root {
  --memorial-black: #011a03;
  --shadow-play: #291801;
  --pitch-black-forests: #00372c;
  --evergreen: #065944;
  --forestial-outpost: #625f00;
}

    Tailwind CSS v4

    /* Memorial Black to Forestial Outpost — https://swatchly.xyz/palette/011a03-291801-00372c-065944-625f00 */
@theme {
  --color-memorial-black: #011a03;
  --color-memorial-black-50: #e9fbe9;
  --color-memorial-black-100: #ddf2dd;
  --color-memorial-black-200: #c7dfc7;
  --color-memorial-black-300: #aecaae;
  --color-memorial-black-400: #8dab8d;
  --color-memorial-black-500: #6f8d6f;
  --color-memorial-black-600: #537053;
  --color-memorial-black-700: #3d563d;
  --color-memorial-black-800: #2b402b;
  --color-memorial-black-900: #1d2d1d;
  --color-memorial-black-950: #011a03;
  --color-shadow-play: #291801;
  --color-shadow-play-50: #fff3e5;
  --color-shadow-play-100: #f7e9d7;
  --color-shadow-play-200: #e6d5bf;
  --color-shadow-play-300: #d1bda5;
  --color-shadow-play-400: #b39e83;
  --color-shadow-play-500: #978267;
  --color-shadow-play-600: #7b674d;
  --color-shadow-play-700: #625039;
  --color-shadow-play-800: #4d3d29;
  --color-shadow-play-900: #3a2d1d;
  --color-shadow-play-950: #291801;
  --color-pitch-black-forests: #00372c;
  --color-pitch-black-forests-50: #e1fcf4;
  --color-pitch-black-forests-100: #d4f3e9;
  --color-pitch-black-forests-200: #bce1d6;
  --color-pitch-black-forests-300: #a1ccbf;
  --color-pitch-black-forests-400: #7dac9e;
  --color-pitch-black-forests-500: #5f9082;
  --color-pitch-black-forests-600: #457467;
  --color-pitch-black-forests-700: #305b50;
  --color-pitch-black-forests-800: #21463c;
  --color-pitch-black-forests-900: #00372c;
  --color-pitch-black-forests-950: #0a201a;
  --color-evergreen: #065944;
  --color-evergreen-50: #dafff0;
  --color-evergreen-100: #ccf7e6;
  --color-evergreen-200: #b1e5d1;
  --color-evergreen-300: #97d1bb;
  --color-evergreen-400: #73b59d;
  --color-evergreen-500: #569b83;
  --color-evergreen-600: #3c816a;
  --color-evergreen-700: #286b56;
  --color-evergreen-800: #065944;
  --color-evergreen-900: #0b4434;
  --color-evergreen-950: #032c20;
  --color-forestial-outpost: #625f00;
  --color-forestial-outpost-50: #f8f9ce;
  --color-forestial-outpost-100: #efefbf;
  --color-forestial-outpost-200: #dddda4;
  --color-forestial-outpost-300: #c9c886;
  --color-forestial-outpost-400: #abaa5f;
  --color-forestial-outpost-500: #918f40;
  --color-forestial-outpost-600: #787525;
  --color-forestial-outpost-700: #625f00;
  --color-forestial-outpost-800: #4d4a00;
  --color-forestial-outpost-900: #3b3900;
  --color-forestial-outpost-950: #252300;
}

    Similar palettes