Godzilla to Yellow Press Color Palette

About this palette

Godzilla to Yellow Press is a 4-color warm, monochromatic, gradient palette: #4C4C00 (Godzilla), #788000 (Olive), #ACB900 (Leafy Woodland), #DEE782 (Yellow Press). It mixes brown, green tones and feels warm overall. The strongest text pairing is #4C4C00 on #DEE782 with a contrast ratio of 6.77:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Godzilla	rgb(76, 76, 0)	hsl(60, 100%, 15%)
Olive	rgb(120, 128, 0)	hsl(64, 100%, 25%)
Leafy Woodland	rgb(172, 185, 0)	hsl(64, 100%, 36%)
Yellow Press	rgb(222, 231, 130)	hsl(65, 68%, 71%)

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.

Aa6.77:1 Good#4C4C00 on #DEE782
Aa6.77:1 Good#DEE782 on #4C4C00
Aa4.14:1 Poor#4C4C00 on #ACB900
Aa4.14:1 Poor#ACB900 on #4C4C00
Aa3.25:1 Poor#788000 on #DEE782
Aa3.25:1 Poor#DEE782 on #788000

Color blindness preview

CSS variables

/* Godzilla to Yellow Press — https://swatchly.xyz/palette/4c4c00-788000-acb900-dee782 */
:root {
  --godzilla: #4c4c00;
  --olive: #788000;
  --leafy-woodland: #acb900;
  --yellow-press: #dee782;
}

Tailwind CSS v4

/* Godzilla to Yellow Press — https://swatchly.xyz/palette/4c4c00-788000-acb900-dee782 */
@theme {
  --color-godzilla: #4c4c00;
  --color-godzilla-50: #f7f9d4;
  --color-godzilla-100: #edefc5;
  --color-godzilla-200: #dadcaa;
  --color-godzilla-300: #c5c78f;
  --color-godzilla-400: #a7a96a;
  --color-godzilla-500: #8d8e4d;
  --color-godzilla-600: #747534;
  --color-godzilla-700: #5e5e21;
  --color-godzilla-800: #4c4c00;
  --color-godzilla-900: #3a3a07;
  --color-godzilla-950: #252502;
  --color-olive: #788000;
  --color-olive-50: #f4fbc5;
  --color-olive-100: #ecf4b8;
  --color-olive-200: #dbe49d;
  --color-olive-300: #c7d07e;
  --color-olive-400: #a9b353;
  --color-olive-500: #90992f;
  --color-olive-600: #788000;
  --color-olive-700: #5f6600;
  --color-olive-800: #4a4f00;
  --color-olive-900: #383c00;
  --color-olive-950: #232500;
  --color-leafy-woodland: #acb900;
  --color-leafy-woodland-50: #f8ffd2;
  --color-leafy-woodland-100: #effaae;
  --color-leafy-woodland-200: #deea8d;
  --color-leafy-woodland-300: #c9d667;
  --color-leafy-woodland-400: #acb900;
  --color-leafy-woodland-500: #8f9900;
  --color-leafy-woodland-600: #727b00;
  --color-leafy-woodland-700: #5a6100;
  --color-leafy-woodland-800: #454b00;
  --color-leafy-woodland-900: #343800;
  --color-leafy-woodland-950: #1f2200;
  --color-yellow-press: #dee782;
  --color-yellow-press-50: #f9ffcd;
  --color-yellow-press-100: #f0f7be;
  --color-yellow-press-200: #dee782;
  --color-yellow-press-300: #c6ce7d;
  --color-yellow-press-400: #a6ad4f;
  --color-yellow-press-500: #8a9127;
  --color-yellow-press-600: #6f7400;
  --color-yellow-press-700: #575b00;
  --color-yellow-press-800: #434700;
  --color-yellow-press-900: #333600;
  --color-yellow-press-950: #202200;
}