Godzilla to Foundation White Color Palette

About this palette

Godzilla to Foundation White is a 5-color warm, earthy, vintage palette: #544C00 (Godzilla), #8C4B00 (Otterly Brown), #CA834F (Butter Bronze), #6CBEE8 (Blue Mana), #EBEBFF (Foundation White). It mixes brown, orange, blue, white tones and feels warm overall. The strongest text pairing is #544C00 on #EBEBFF with a contrast ratio of 7.41:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Godzilla	rgb(84, 76, 0)	hsl(54, 100%, 16%)
Otterly Brown	rgb(140, 75, 0)	hsl(32, 100%, 27%)
Butter Bronze	rgb(202, 131, 79)	hsl(25, 54%, 55%)
Blue Mana	rgb(108, 190, 232)	hsl(200, 73%, 67%)
Foundation White	rgb(235, 235, 255)	hsl(240, 100%, 96%)

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.

Aa7.41:1 Very good#544C00 on #EBEBFF
Aa7.41:1 Very good#EBEBFF on #544C00
Aa5.72:1 Good#8C4B00 on #EBEBFF
Aa5.72:1 Good#EBEBFF on #8C4B00
Aa4.22:1 Poor#544C00 on #6CBEE8
Aa4.22:1 Poor#6CBEE8 on #544C00
Aa3.26:1 Poor#8C4B00 on #6CBEE8
Aa3.26:1 Poor#6CBEE8 on #8C4B00

Color blindness preview

CSS variables

/* Godzilla to Foundation White — https://swatchly.xyz/palette/544c00-8c4b00-ca834f-6cbee8-ebebff */
:root {
  --godzilla: #544c00;
  --otterly-brown: #8c4b00;
  --butter-bronze: #ca834f;
  --blue-mana: #6cbee8;
  --foundation-white: #ebebff;
}

Tailwind CSS v4

/* Godzilla to Foundation White — https://swatchly.xyz/palette/544c00-8c4b00-ca834f-6cbee8-ebebff */
@theme {
  --color-godzilla: #544c00;
  --color-godzilla-50: #fbf7d3;
  --color-godzilla-100: #f1edc5;
  --color-godzilla-200: #dfdaa9;
  --color-godzilla-300: #cbc58e;
  --color-godzilla-400: #aea76a;
  --color-godzilla-500: #958d4d;
  --color-godzilla-600: #7b7434;
  --color-godzilla-700: #655e20;
  --color-godzilla-800: #544c00;
  --color-godzilla-900: #403b06;
  --color-godzilla-950: #292501;
  --color-otterly-brown: #8c4b00;
  --color-otterly-brown-50: #fff3e9;
  --color-otterly-brown-100: #ffe6d3;
  --color-otterly-brown-200: #ffcea9;
  --color-otterly-brown-300: #f3b585;
  --color-otterly-brown-400: #d9955e;
  --color-otterly-brown-500: #bf7a40;
  --color-otterly-brown-600: #a36124;
  --color-otterly-brown-700: #8c4b00;
  --color-otterly-brown-800: #6f3a00;
  --color-otterly-brown-900: #562c00;
  --color-otterly-brown-950: #381a00;
  --color-butter-bronze: #ca834f;
  --color-butter-bronze-50: #ffede1;
  --color-butter-bronze-100: #ffdec7;
  --color-butter-bronze-200: #fcc198;
  --color-butter-bronze-300: #e8a678;
  --color-butter-bronze-400: #ca834f;
  --color-butter-bronze-500: #ae6a35;
  --color-butter-bronze-600: #92521d;
  --color-butter-bronze-700: #793f09;
  --color-butter-bronze-800: #623000;
  --color-butter-bronze-900: #4e2500;
  --color-butter-bronze-950: #341600;
  --color-blue-mana: #6cbee8;
  --color-blue-mana-50: #dbf2ff;
  --color-blue-mana-100: #bfe8ff;
  --color-blue-mana-200: #95d5f8;
  --color-blue-mana-300: #6cbee8;
  --color-blue-mana-400: #50a0c9;
  --color-blue-mana-500: #3287af;
  --color-blue-mana-600: #156e94;
  --color-blue-mana-700: #00597a;
  --color-blue-mana-800: #004762;
  --color-blue-mana-900: #00384f;
  --color-blue-mana-950: #002333;
  --color-foundation-white: #ebebff;
  --color-foundation-white-50: #f6f6ff;
  --color-foundation-white-100: #ebebff;
  --color-foundation-white-200: #d7d8e6;
  --color-foundation-white-300: #c0c0d1;
  --color-foundation-white-400: #a1a0b2;
  --color-foundation-white-500: #858597;
  --color-foundation-white-600: #6a6a7b;
  --color-foundation-white-700: #545463;
  --color-foundation-white-800: #41414e;
  --color-foundation-white-900: #32323d;
  --color-foundation-white-950: #1e1e26;
}