Godzilla to Jungle Look Color Palette

About this palette

Godzilla to Jungle Look is a 5-color cool, earthy, monochromatic palette: #405013 (Godzilla), #9AAB7C (Forester), #141A0C (Noir Mystique), #C2CC9F (Seedling), #6E7D33 (Jungle Look). It mixes green, black tones and feels cool overall. The strongest text pairing is #141A0C on #C2CC9F with a contrast ratio of 10.51:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Godzilla	rgb(64, 80, 19)	hsl(76, 62%, 19%)
Forester	rgb(154, 171, 124)	hsl(82, 22%, 58%)
Noir Mystique	rgb(20, 26, 12)	hsl(86, 37%, 7%)
Seedling	rgb(194, 204, 159)	hsl(73, 31%, 71%)
Jungle Look	rgb(110, 125, 51)	hsl(72, 42%, 35%)

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.

Aa10.51:1 Very good#141A0C on #C2CC9F
Aa10.51:1 Very good#C2CC9F on #141A0C
Aa7.18:1 Very good#9AAB7C on #141A0C
Aa7.18:1 Very good#141A0C on #9AAB7C
Aa5.23:1 Good#405013 on #C2CC9F
Aa5.23:1 Good#C2CC9F on #405013
Aa3.93:1 Poor#141A0C on #6E7D33
Aa3.93:1 Poor#6E7D33 on #141A0C

Color blindness preview

CSS variables

/* Godzilla to Jungle Look — https://swatchly.xyz/palette/405013-9aab7c-141a0c-c2cc9f-6e7d33 */
:root {
  --godzilla: #405013;
  --forester: #9aab7c;
  --noir-mystique: #141a0c;
  --seedling: #c2cc9f;
  --jungle-look: #6e7d33;
}

Tailwind CSS v4

/* Godzilla to Jungle Look — https://swatchly.xyz/palette/405013-9aab7c-141a0c-c2cc9f-6e7d33 */
@theme {
  --color-godzilla: #405013;
  --color-godzilla-50: #effbd8;
  --color-godzilla-100: #e4f2cb;
  --color-godzilla-200: #cfdfb1;
  --color-godzilla-300: #b9cb96;
  --color-godzilla-400: #9aad73;
  --color-godzilla-500: #809357;
  --color-godzilla-600: #67793e;
  --color-godzilla-700: #52622b;
  --color-godzilla-800: #405013;
  --color-godzilla-900: #313d12;
  --color-godzilla-950: #1e2707;
  --color-forester: #9aab7c;
  --color-forester-50: #f0fbe0;
  --color-forester-100: #e6f1d3;
  --color-forester-200: #d1dfbb;
  --color-forester-300: #bac9a1;
  --color-forester-400: #9aab7c;
  --color-forester-500: #7f8f61;
  --color-forester-600: #647448;
  --color-forester-700: #4e5c34;
  --color-forester-800: #3c4825;
  --color-forester-900: #2e3719;
  --color-forester-950: #1b220d;
  --color-noir-mystique: #141a0c;
  --color-noir-mystique-50: #f2f7ec;
  --color-noir-mystique-100: #e8eee1;
  --color-noir-mystique-200: #d4dacc;
  --color-noir-mystique-300: #bdc4b4;
  --color-noir-mystique-400: #9da593;
  --color-noir-mystique-500: #808876;
  --color-noir-mystique-600: #646c5b;
  --color-noir-mystique-700: #4d5445;
  --color-noir-mystique-800: #393f32;
  --color-noir-mystique-900: #292e24;
  --color-noir-mystique-950: #141a0c;
  --color-seedling: #c2cc9f;
  --color-seedling-50: #f5fbe3;
  --color-seedling-100: #ecf3d7;
  --color-seedling-200: #d9e0c0;
  --color-seedling-300: #c2cc9f;
  --color-seedling-400: #a2ab82;
  --color-seedling-500: #868f64;
  --color-seedling-600: #6b734a;
  --color-seedling-700: #545b36;
  --color-seedling-800: #404726;
  --color-seedling-900: #31361a;
  --color-seedling-950: #1e220d;
  --color-jungle-look: #6e7d33;
  --color-jungle-look-50: #f0fbd2;
  --color-jungle-look-100: #e8f3c6;
  --color-jungle-look-200: #d5e2ac;
  --color-jungle-look-300: #bfce90;
  --color-jungle-look-400: #a1b16b;
  --color-jungle-look-500: #87974d;
  --color-jungle-look-600: #6e7d33;
  --color-jungle-look-700: #56641d;
  --color-jungle-look-800: #434e0c;
  --color-jungle-look-900: #323c02;
  --color-jungle-look-950: #1f2500;
}