Start generating

Noir Mystique to Rich Black color palette

1A1900Noir Mystique59641FBimi Green00120CJedi Night1B3112Darkest Forest375251Night Watch004343Rich Black
Open in generator Export PNG, PDF, ASE…

About this palette

Noir Mystique to Rich Black is a 6-color dark palette: #1A1900 (Noir Mystique), #59641F (Bimi Green), #00120C (Jedi Night), #1B3112 (Darkest Forest), #375251 (Night Watch), #004343 (Rich Black). It mixes brown, green, black, gray, turquoise tones and feels cool overall. The strongest text pairing is #59641F on #00120C with a contrast ratio of 2.99:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Noir Mystiquergb(26, 25, 0)hsl(58, 100%, 5%)
Bimi Greenrgb(89, 100, 31)hsl(70, 53%, 26%)
Jedi Nightrgb(0, 18, 12)hsl(160, 100%, 4%)
Darkest Forestrgb(27, 49, 18)hsl(103, 46%, 13%)
Night Watchrgb(55, 82, 81)hsl(178, 20%, 27%)
Rich Blackrgb(0, 67, 67)hsl(180, 100%, 13%)

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

    /* Noir Mystique to Rich Black — https://swatchly.xyz/palette/1a1900-59641f-00120c-1b3112-375251-004343 */
:root {
  --noir-mystique: #1a1900;
  --bimi-green: #59641f;
  --jedi-night: #00120c;
  --darkest-forest: #1b3112;
  --night-watch: #375251;
  --rich-black: #004343;
}

    Tailwind CSS v4

    /* Noir Mystique to Rich Black — https://swatchly.xyz/palette/1a1900-59641f-00120c-1b3112-375251-004343 */
@theme {
  --color-noir-mystique: #1a1900;
  --color-noir-mystique-50: #f6f7e4;
  --color-noir-mystique-100: #ededd8;
  --color-noir-mystique-200: #d9dac1;
  --color-noir-mystique-300: #c3c3a7;
  --color-noir-mystique-400: #a4a485;
  --color-noir-mystique-500: #878768;
  --color-noir-mystique-600: #6b6b4d;
  --color-noir-mystique-700: #535338;
  --color-noir-mystique-800: #3e3e28;
  --color-noir-mystique-900: #2e2d1b;
  --color-noir-mystique-950: #1a1900;
  --color-bimi-green: #59641f;
  --color-bimi-green-50: #f2fad4;
  --color-bimi-green-100: #e7f1c6;
  --color-bimi-green-200: #d5e0ad;
  --color-bimi-green-300: #bfcb91;
  --color-bimi-green-400: #a1ae6d;
  --color-bimi-green-500: #879450;
  --color-bimi-green-600: #6e7a37;
  --color-bimi-green-700: #59641f;
  --color-bimi-green-800: #454e13;
  --color-bimi-green-900: #353c08;
  --color-bimi-green-950: #212602;
  --color-jedi-night: #00120c;
  --color-jedi-night-50: #eaf9f4;
  --color-jedi-night-100: #dff0e9;
  --color-jedi-night-200: #c9ddd5;
  --color-jedi-night-300: #b0c7bf;
  --color-jedi-night-400: #8fa89f;
  --color-jedi-night-500: #708980;
  --color-jedi-night-600: #536a62;
  --color-jedi-night-700: #3b5049;
  --color-jedi-night-800: #283933;
  --color-jedi-night-900: #192622;
  --color-jedi-night-950: #00120c;
  --color-darkest-forest: #1b3112;
  --color-darkest-forest-50: #ebfbe5;
  --color-darkest-forest-100: #e0f1da;
  --color-darkest-forest-200: #cadfc3;
  --color-darkest-forest-300: #b2c9a9;
  --color-darkest-forest-400: #8fa986;
  --color-darkest-forest-500: #728c68;
  --color-darkest-forest-600: #576f4e;
  --color-darkest-forest-700: #415639;
  --color-darkest-forest-800: #2f4128;
  --color-darkest-forest-900: #1b3112;
  --color-darkest-forest-950: #121c0e;
  --color-night-watch: #375251;
  --color-night-watch-50: #e8f9f8;
  --color-night-watch-100: #ddf0ef;
  --color-night-watch-200: #c4dbda;
  --color-night-watch-300: #a9c3c2;
  --color-night-watch-400: #87a3a2;
  --color-night-watch-500: #6a8685;
  --color-night-watch-600: #4f6a69;
  --color-night-watch-700: #375251;
  --color-night-watch-800: #2b403f;
  --color-night-watch-900: #203130;
  --color-night-watch-950: #121e1e;
  --color-rich-black: #004343;
  --color-rich-black-50: #ddfdfc;
  --color-rich-black-100: #d0f3f3;
  --color-rich-black-200: #b7e1e0;
  --color-rich-black-300: #9bcccb;
  --color-rich-black-400: #78aeae;
  --color-rich-black-500: #5c9494;
  --color-rich-black-600: #437b7a;
  --color-rich-black-700: #306464;
  --color-rich-black-800: #215151;
  --color-rich-black-900: #004343;
  --color-rich-black-950: #0a2a2a;
}

    Similar palettes