Fortune Cookie to Everglade Color Palette

About this palette

Fortune Cookie to Everglade is a 4-color vintage palette: #E0C4A1 (Fortune Cookie), #BF879C (Punched Pink), #405B82 (Sailor), #264031 (Everglade). It mixes orange, pink, blue, green tones and feels balanced overall. The strongest text pairing is #E0C4A1 on #264031 with a contrast ratio of 6.76:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Fortune Cookie	rgb(224, 196, 161)	hsl(33, 50%, 75%)
Punched Pink	rgb(191, 135, 156)	hsl(338, 30%, 64%)
Sailor	rgb(64, 91, 130)	hsl(215, 34%, 38%)
Everglade	rgb(38, 64, 49)	hsl(145, 25%, 20%)

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.76:1 Good#E0C4A1 on #264031
Aa6.76:1 Good#264031 on #E0C4A1
Aa4.14:1 Poor#E0C4A1 on #405B82
Aa4.14:1 Poor#405B82 on #E0C4A1
Aa3.85:1 Poor#BF879C on #264031
Aa3.85:1 Poor#264031 on #BF879C

Color blindness preview

CSS variables

/* Fortune Cookie to Everglade — https://swatchly.xyz/palette/e0c4a1-bf879c-405b82-264031 */
:root {
  --fortune-cookie: #e0c4a1;
  --punched-pink: #bf879c;
  --sailor: #405b82;
  --everglade: #264031;
}

Tailwind CSS v4

/* Fortune Cookie to Everglade — https://swatchly.xyz/palette/e0c4a1-bf879c-405b82-264031 */
@theme {
  --color-fortune-cookie: #e0c4a1;
  --color-fortune-cookie-50: #fff8f0;
  --color-fortune-cookie-100: #ffeed9;
  --color-fortune-cookie-200: #efdbc2;
  --color-fortune-cookie-300: #e0c4a1;
  --color-fortune-cookie-400: #bda383;
  --color-fortune-cookie-500: #a08665;
  --color-fortune-cookie-600: #846b4b;
  --color-fortune-cookie-700: #6a5336;
  --color-fortune-cookie-800: #533f26;
  --color-fortune-cookie-900: #402f1a;
  --color-fortune-cookie-950: #291d0d;
  --color-punched-pink: #bf879c;
  --color-punched-pink-50: #ffedf3;
  --color-punched-pink-100: #ffdce8;
  --color-punched-pink-200: #f2c3d4;
  --color-punched-pink-300: #dda9bc;
  --color-punched-pink-400: #bf879c;
  --color-punched-pink-500: #a36d82;
  --color-punched-pink-600: #885569;
  --color-punched-pink-700: #6f4254;
  --color-punched-pink-800: #593242;
  --color-punched-pink-900: #472633;
  --color-punched-pink-950: #2f1620;
  --color-sailor: #405b82;
  --color-sailor-50: #eff6ff;
  --color-sailor-100: #dfecff;
  --color-sailor-200: #c3dafc;
  --color-sailor-300: #abc5ea;
  --color-sailor-400: #89a6cf;
  --color-sailor-500: #6e8bb5;
  --color-sailor-600: #567199;
  --color-sailor-700: #405b82;
  --color-sailor-800: #314767;
  --color-sailor-900: #233652;
  --color-sailor-950: #142235;
  --color-everglade: #264031;
  --color-everglade-50: #e9faef;
  --color-everglade-100: #def1e5;
  --color-everglade-200: #c8ded0;
  --color-everglade-300: #afc8b8;
  --color-everglade-400: #8fab99;
  --color-everglade-500: #74917f;
  --color-everglade-600: #5c7766;
  --color-everglade-700: #486152;
  --color-everglade-800: #374e41;
  --color-everglade-900: #264031;
  --color-everglade-950: #1a281f;
}