Flip a Coin to Bigfoot Color Palette

About this palette

Flip a Coin to Bigfoot is a 4-color muted palette: #CFDACC (Flip a Coin), #AE8F8B (Cortex), #2A3849 (Total Eclipse), #6F4F4A (Bigfoot). It mixes gray, red, blue tones and feels warm overall. The strongest text pairing is #CFDACC on #2A3849 with a contrast ratio of 8.27:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Flip a Coin	rgb(207, 218, 204)	hsl(107, 16%, 83%)
Cortex	rgb(174, 143, 139)	hsl(7, 18%, 61%)
Total Eclipse	rgb(42, 56, 73)	hsl(213, 27%, 23%)
Bigfoot	rgb(111, 79, 74)	hsl(8, 20%, 36%)

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.27:1 Very good#CFDACC on #2A3849
Aa8.27:1 Very good#2A3849 on #CFDACC
Aa5.03:1 Good#CFDACC on #6F4F4A
Aa5.03:1 Good#6F4F4A on #CFDACC
Aa4.03:1 Poor#AE8F8B on #2A3849
Aa4.03:1 Poor#2A3849 on #AE8F8B

Color blindness preview

CSS variables

/* Flip a Coin to Bigfoot — https://swatchly.xyz/palette/cfdacc-ae8f8b-2a3849-6f4f4a */
:root {
  --flip-a-coin: #cfdacc;
  --cortex: #ae8f8b;
  --total-eclipse: #2a3849;
  --bigfoot: #6f4f4a;
}

Tailwind CSS v4

/* Flip a Coin to Bigfoot — https://swatchly.xyz/palette/cfdacc-ae8f8b-2a3849-6f4f4a */
@theme {
  --color-flip-a-coin: #cfdacc;
  --color-flip-a-coin-50: #f0f6ee;
  --color-flip-a-coin-100: #e5ece4;
  --color-flip-a-coin-200: #cfdacc;
  --color-flip-a-coin-300: #bac3b7;
  --color-flip-a-coin-400: #9aa497;
  --color-flip-a-coin-500: #7f897c;
  --color-flip-a-coin-600: #656f63;
  --color-flip-a-coin-700: #4f584d;
  --color-flip-a-coin-800: #3d453b;
  --color-flip-a-coin-900: #2f352d;
  --color-flip-a-coin-950: #1c211b;
  --color-cortex: #ae8f8b;
  --color-cortex-50: #ffedea;
  --color-cortex-100: #f6e0dd;
  --color-cortex-200: #e3cac6;
  --color-cortex-300: #cdb1ad;
  --color-cortex-400: #ae8f8b;
  --color-cortex-500: #947672;
  --color-cortex-600: #7a5e5a;
  --color-cortex-700: #634a47;
  --color-cortex-800: #4f3937;
  --color-cortex-900: #3f2c2a;
  --color-cortex-950: #291b1a;
  --color-total-eclipse: #2a3849;
  --color-total-eclipse-50: #eff6ff;
  --color-total-eclipse-100: #e1ecfa;
  --color-total-eclipse-200: #ccd9e9;
  --color-total-eclipse-300: #b4c2d5;
  --color-total-eclipse-400: #94a4b8;
  --color-total-eclipse-500: #79899d;
  --color-total-eclipse-600: #607082;
  --color-total-eclipse-700: #4b5a6b;
  --color-total-eclipse-800: #3b4756;
  --color-total-eclipse-900: #2a3849;
  --color-total-eclipse-950: #1b232d;
  --color-bigfoot: #6f4f4a;
  --color-bigfoot-50: #fff2ef;
  --color-bigfoot-100: #fde5e1;
  --color-bigfoot-200: #edd1cc;
  --color-bigfoot-300: #d9bab4;
  --color-bigfoot-400: #bc9a94;
  --color-bigfoot-500: #a17f79;
  --color-bigfoot-600: #866560;
  --color-bigfoot-700: #6f4f4a;
  --color-bigfoot-800: #573d39;
  --color-bigfoot-900: #442e2b;
  --color-bigfoot-950: #2c1c19;
}