Start generating

Godzilla to Moelleux au Chocolat color palette

515100Godzilla00170CJedi Night002B11Haunted Forest296660Verdant Forest4A2E00Moelleux au Chocolat
Open in generator Export PNG, PDF, ASE…

About this palette

Godzilla to Moelleux au Chocolat is a 5-color dark, cool, earthy palette: #515100 (Godzilla), #00170C (Jedi Night), #002B11 (Haunted Forest), #296660 (Verdant Forest), #4A2E00 (Moelleux au Chocolat). It mixes brown, black, green, turquoise tones and feels cool overall. The strongest text pairing is #00170C on #296660 with a contrast ratio of 2.81:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Godzillargb(81, 81, 0)hsl(60, 100%, 16%)
Jedi Nightrgb(0, 23, 12)hsl(151, 100%, 5%)
Haunted Forestrgb(0, 43, 17)hsl(144, 100%, 8%)
Verdant Forestrgb(41, 102, 96)hsl(174, 43%, 28%)
Moelleux au Chocolatrgb(74, 46, 0)hsl(37, 100%, 15%)

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

    /* Godzilla to Moelleux au Chocolat — https://swatchly.xyz/palette/515100-00170c-002b11-296660-4a2e00 */
:root {
  --godzilla: #515100;
  --jedi-night: #00170c;
  --haunted-forest: #002b11;
  --verdant-forest: #296660;
  --moelleux-au-chocolat: #4a2e00;
}

    Tailwind CSS v4

    /* Godzilla to Moelleux au Chocolat — https://swatchly.xyz/palette/515100-00170c-002b11-296660-4a2e00 */
@theme {
  --color-godzilla: #515100;
  --color-godzilla-50: #f7f9d2;
  --color-godzilla-100: #edefc4;
  --color-godzilla-200: #d8daa6;
  --color-godzilla-300: #c1c387;
  --color-godzilla-400: #a0a25f;
  --color-godzilla-500: #848540;
  --color-godzilla-600: #686926;
  --color-godzilla-700: #515100;
  --color-godzilla-800: #3f3f05;
  --color-godzilla-900: #303001;
  --color-godzilla-950: #1e1e00;
  --color-jedi-night: #00170c;
  --color-jedi-night-50: #e9faf0;
  --color-jedi-night-100: #def1e6;
  --color-jedi-night-200: #c7ded1;
  --color-jedi-night-300: #aec8ba;
  --color-jedi-night-400: #8da99a;
  --color-jedi-night-500: #6e8b7c;
  --color-jedi-night-600: #526d5f;
  --color-jedi-night-700: #3c5347;
  --color-jedi-night-800: #2a3d33;
  --color-jedi-night-900: #1b2b23;
  --color-jedi-night-950: #00170c;
  --color-haunted-forest: #002b11;
  --color-haunted-forest-50: #e4fde9;
  --color-haunted-forest-100: #d8f4de;
  --color-haunted-forest-200: #c0e1c8;
  --color-haunted-forest-300: #a6ccaf;
  --color-haunted-forest-400: #84ad8e;
  --color-haunted-forest-500: #689373;
  --color-haunted-forest-600: #4f785a;
  --color-haunted-forest-700: #3c6146;
  --color-haunted-forest-800: #2c4d35;
  --color-haunted-forest-900: #203d28;
  --color-haunted-forest-950: #002b11;
  --color-verdant-forest: #296660;
  --color-verdant-forest-50: #dcfdf9;
  --color-verdant-forest-100: #cff4ef;
  --color-verdant-forest-200: #b7e3dd;
  --color-verdant-forest-300: #9ccfc8;
  --color-verdant-forest-400: #78b1aa;
  --color-verdant-forest-500: #5b9790;
  --color-verdant-forest-600: #417c76;
  --color-verdant-forest-700: #296660;
  --color-verdant-forest-800: #1d504b;
  --color-verdant-forest-900: #123e3a;
  --color-verdant-forest-950: #072724;
  --color-moelleux-au-chocolat: #4a2e00;
  --color-moelleux-au-chocolat-50: #fff3e5;
  --color-moelleux-au-chocolat-100: #fde7cc;
  --color-moelleux-au-chocolat-200: #edd3b3;
  --color-moelleux-au-chocolat-300: #d9bc97;
  --color-moelleux-au-chocolat-400: #bc9c73;
  --color-moelleux-au-chocolat-500: #a18157;
  --color-moelleux-au-chocolat-600: #85673e;
  --color-moelleux-au-chocolat-700: #6d512b;
  --color-moelleux-au-chocolat-800: #573f1d;
  --color-moelleux-au-chocolat-900: #4a2e00;
  --color-moelleux-au-chocolat-950: #2d1d08;
}

    Similar palettes