Blushing Cinnamon to Godzilla Color Palette

About this palette

Blushing Cinnamon to Godzilla is a 5-color warm, earthy, vintage, gradient palette: #FFC2A4 (Blushing Cinnamon), #D0A57D (Outback), #A48958 (Banner Gold), #796E32 (Garden Weed), #505300 (Godzilla). It mixes orange, yellow, brown, green tones and feels warm overall. The strongest text pairing is #FFC2A4 on #505300 with a contrast ratio of 5.24:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Blushing Cinnamon	rgb(255, 194, 164)	hsl(20, 100%, 82%)
Outback	rgb(208, 165, 125)	hsl(29, 47%, 65%)
Banner Gold	rgb(164, 137, 88)	hsl(39, 30%, 49%)
Garden Weed	rgb(121, 110, 50)	hsl(51, 42%, 34%)
Godzilla	rgb(80, 83, 0)	hsl(62, 100%, 16%)

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.

Aa5.24:1 Good#FFC2A4 on #505300
Aa5.24:1 Good#505300 on #FFC2A4
Aa3.63:1 Poor#D0A57D on #505300
Aa3.63:1 Poor#505300 on #D0A57D
Aa3.30:1 Poor#FFC2A4 on #796E32
Aa3.30:1 Poor#796E32 on #FFC2A4

Color blindness preview

CSS variables

/* Blushing Cinnamon to Godzilla — https://swatchly.xyz/palette/ffc2a4-d0a57d-a48958-796e32-505300 */
:root {
  --blushing-cinnamon: #ffc2a4;
  --outback: #d0a57d;
  --banner-gold: #a48958;
  --garden-weed: #796e32;
  --godzilla: #505300;
}

Tailwind CSS v4

/* Blushing Cinnamon to Godzilla — https://swatchly.xyz/palette/ffc2a4-d0a57d-a48958-796e32-505300 */
@theme {
  --color-blushing-cinnamon: #ffc2a4;
  --color-blushing-cinnamon-50: #ffede4;
  --color-blushing-cinnamon-100: #ffdecf;
  --color-blushing-cinnamon-200: #ffc2a4;
  --color-blushing-cinnamon-300: #e3af95;
  --color-blushing-cinnamon-400: #c78f73;
  --color-blushing-cinnamon-500: #ac7458;
  --color-blushing-cinnamon-600: #905b41;
  --color-blushing-cinnamon-700: #76472e;
  --color-blushing-cinnamon-800: #603621;
  --color-blushing-cinnamon-900: #4b2816;
  --color-blushing-cinnamon-950: #31180a;
  --color-outback: #d0a57d;
  --color-outback-50: #fff8f3;
  --color-outback-100: #ffefe1;
  --color-outback-200: #f9dabe;
  --color-outback-300: #e8c5a4;
  --color-outback-400: #d0a57d;
  --color-outback-500: #b08761;
  --color-outback-600: #926b44;
  --color-outback-700: #76522f;
  --color-outback-800: #5e3e1f;
  --color-outback-900: #482e13;
  --color-outback-950: #2d1b07;
  --color-banner-gold: #a48958;
  --color-banner-gold-50: #fff5e4;
  --color-banner-gold-100: #fdeccd;
  --color-banner-gold-200: #edd9b4;
  --color-banner-gold-300: #dac399;
  --color-banner-gold-400: #bea475;
  --color-banner-gold-500: #a48958;
  --color-banner-gold-600: #876d3d;
  --color-banner-gold-700: #6d5629;
  --color-banner-gold-800: #574219;
  --color-banner-gold-900: #43320f;
  --color-banner-gold-950: #2a1e05;
  --color-garden-weed: #796e32;
  --color-garden-weed-50: #fcf6d4;
  --color-garden-weed-100: #f3edc7;
  --color-garden-weed-200: #e1d9ac;
  --color-garden-weed-300: #ccc38f;
  --color-garden-weed-400: #aea46a;
  --color-garden-weed-500: #94884d;
  --color-garden-weed-600: #796e32;
  --color-garden-weed-700: #61571f;
  --color-garden-weed-800: #4c4411;
  --color-garden-weed-900: #3b3407;
  --color-garden-weed-950: #252002;
  --color-godzilla: #505300;
  --color-godzilla-50: #f5f9d2;
  --color-godzilla-100: #ebf0c3;
  --color-godzilla-200: #d7dba6;
  --color-godzilla-300: #bfc487;
  --color-godzilla-400: #9fa45f;
  --color-godzilla-500: #828740;
  --color-godzilla-600: #676b26;
  --color-godzilla-700: #505300;
  --color-godzilla-800: #3e4105;
  --color-godzilla-900: #303200;
  --color-godzilla-950: #1d1e00;
}