Godzilla to Cold White Color Palette

About this palette

Godzilla to Cold White is a 5-color warm, vintage palette: #464A0C (Godzilla), #A13E23 (Brick), #DF694D (Heirloom Blush), #C4C1F5 (Innocent Snowdrop), #ECFCFF (Cold White). It mixes green, red, purple, white tones and feels warm overall. The strongest text pairing is #464A0C on #ECFCFF with a contrast ratio of 8.88:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Godzilla	rgb(70, 74, 12)	hsl(64, 72%, 17%)
Brick	rgb(161, 62, 35)	hsl(13, 64%, 38%)
Heirloom Blush	rgb(223, 105, 77)	hsl(12, 70%, 59%)
Innocent Snowdrop	rgb(196, 193, 245)	hsl(243, 72%, 86%)
Cold White	rgb(236, 252, 255)	hsl(189, 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.

Aa8.88:1 Very good#464A0C on #ECFCFF
Aa8.88:1 Very good#ECFCFF on #464A0C
Aa6.17:1 Good#A13E23 on #ECFCFF
Aa6.17:1 Good#ECFCFF on #A13E23
Aa5.48:1 Good#464A0C on #C4C1F5
Aa5.48:1 Good#C4C1F5 on #464A0C
Aa3.81:1 Poor#A13E23 on #C4C1F5
Aa3.81:1 Poor#C4C1F5 on #A13E23

Color blindness preview

CSS variables

/* Godzilla to Cold White — https://swatchly.xyz/palette/464a0c-a13e23-df694d-c4c1f5-ecfcff */
:root {
  --godzilla: #464a0c;
  --brick: #a13e23;
  --heirloom-blush: #df694d;
  --innocent-snowdrop: #c4c1f5;
  --cold-white: #ecfcff;
}

Tailwind CSS v4

/* Godzilla to Cold White — https://swatchly.xyz/palette/464a0c-a13e23-df694d-c4c1f5-ecfcff */
@theme {
  --color-godzilla: #464a0c;
  --color-godzilla-50: #f5f9d7;
  --color-godzilla-100: #ebefca;
  --color-godzilla-200: #d7dcaf;
  --color-godzilla-300: #c1c794;
  --color-godzilla-400: #a2a870;
  --color-godzilla-500: #888e53;
  --color-godzilla-600: #6e733a;
  --color-godzilla-700: #585d27;
  --color-godzilla-800: #464a0c;
  --color-godzilla-900: #36390f;
  --color-godzilla-950: #212405;
  --color-brick: #a13e23;
  --color-brick-50: #fff2ee;
  --color-brick-100: #ffe2da;
  --color-brick-200: #ffc4b4;
  --color-brick-300: #ff9f85;
  --color-brick-400: #e07a5e;
  --color-brick-500: #c15b40;
  --color-brick-600: #a13e23;
  --color-brick-700: #832d16;
  --color-brick-800: #6a200a;
  --color-brick-900: #551504;
  --color-brick-950: #380a01;
  --color-heirloom-blush: #df694d;
  --color-heirloom-blush-50: #fff5f2;
  --color-heirloom-blush-100: #ffeae5;
  --color-heirloom-blush-200: #ffd2c6;
  --color-heirloom-blush-300: #ffb4a1;
  --color-heirloom-blush-400: #f8876c;
  --color-heirloom-blush-500: #df694d;
  --color-heirloom-blush-600: #bd4b30;
  --color-heirloom-blush-700: #9d3319;
  --color-heirloom-blush-800: #802108;
  --color-heirloom-blush-900: #651400;
  --color-heirloom-blush-950: #410900;
  --color-innocent-snowdrop: #c4c1f5;
  --color-innocent-snowdrop-50: #f8f8ff;
  --color-innocent-snowdrop-100: #eeeeff;
  --color-innocent-snowdrop-200: #dad9fe;
  --color-innocent-snowdrop-300: #c4c1f5;
  --color-innocent-snowdrop-400: #a4a1d0;
  --color-innocent-snowdrop-500: #8784b4;
  --color-innocent-snowdrop-600: #6c6897;
  --color-innocent-snowdrop-700: #55517b;
  --color-innocent-snowdrop-800: #413e62;
  --color-innocent-snowdrop-900: #312e4d;
  --color-innocent-snowdrop-950: #1e1c32;
  --color-cold-white: #ecfcff;
  --color-cold-white-50: #ecfcff;
  --color-cold-white-100: #e7f0f2;
  --color-cold-white-200: #d1dcde;
  --color-cold-white-300: #b8c5c8;
  --color-cold-white-400: #97a6a8;
  --color-cold-white-500: #7b8a8c;
  --color-cold-white-600: #616f71;
  --color-cold-white-700: #4b585a;
  --color-cold-white-800: #3a4547;
  --color-cold-white-900: #2c3536;
  --color-cold-white-950: #1a2122;
}