Close but No Cigar to Zombie Color Palette

About this palette

Close but No Cigar to Zombie is a 5-color warm, earthy, vintage, gradient palette: #311F0A (Close but No Cigar), #74450F (Antique Brass), #9C7C2D (Fernweh), #B7A65C (Pickled), #D6DCB0 (Zombie). It mixes brown, yellow, green tones and feels warm overall. The strongest text pairing is #311F0A on #D6DCB0 with a contrast ratio of 11.06:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Close but No Cigar	rgb(49, 31, 10)	hsl(32, 66%, 12%)
Antique Brass	rgb(116, 69, 15)	hsl(32, 77%, 26%)
Fernweh	rgb(156, 124, 45)	hsl(43, 55%, 39%)
Pickled	rgb(183, 166, 92)	hsl(49, 39%, 54%)
Zombie	rgb(214, 220, 176)	hsl(68, 39%, 78%)

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.

Aa11.06:1 Very good#311F0A on #D6DCB0
Aa11.06:1 Very good#D6DCB0 on #311F0A
Aa6.48:1 Good#311F0A on #B7A65C
Aa6.48:1 Good#B7A65C on #311F0A
Aa5.66:1 Good#74450F on #D6DCB0
Aa5.66:1 Good#D6DCB0 on #74450F
Aa4.01:1 Poor#311F0A on #9C7C2D
Aa4.01:1 Poor#9C7C2D on #311F0A

Color blindness preview

CSS variables

/* Close but No Cigar to Zombie — https://swatchly.xyz/palette/311f0a-74450f-9c7c2d-b7a65c-d6dcb0 */
:root {
  --close-but-no-cigar: #311f0a;
  --antique-brass: #74450f;
  --fernweh: #9c7c2d;
  --pickled: #b7a65c;
  --zombie: #d6dcb0;
}

Tailwind CSS v4

/* Close but No Cigar to Zombie — https://swatchly.xyz/palette/311f0a-74450f-9c7c2d-b7a65c-d6dcb0 */
@theme {
  --color-close-but-no-cigar: #311f0a;
  --color-close-but-no-cigar-50: #fff3e7;
  --color-close-but-no-cigar-100: #f8e8d9;
  --color-close-but-no-cigar-200: #e6d4c2;
  --color-close-but-no-cigar-300: #d1bda8;
  --color-close-but-no-cigar-400: #b39d86;
  --color-close-but-no-cigar-500: #99836b;
  --color-close-but-no-cigar-600: #7e6953;
  --color-close-but-no-cigar-700: #67543f;
  --color-close-but-no-cigar-800: #534230;
  --color-close-but-no-cigar-900: #423324;
  --color-close-but-no-cigar-950: #311f0a;
  --color-antique-brass: #74450f;
  --color-antique-brass-50: #fff3e8;
  --color-antique-brass-100: #ffe6d0;
  --color-antique-brass-200: #f7cea9;
  --color-antique-brass-300: #e4b58b;
  --color-antique-brass-400: #c69464;
  --color-antique-brass-500: #aa7746;
  --color-antique-brass-600: #8c5d2d;
  --color-antique-brass-700: #74450f;
  --color-antique-brass-800: #5b360c;
  --color-antique-brass-900: #472805;
  --color-antique-brass-950: #2e1801;
  --color-fernweh: #9c7c2d;
  --color-fernweh-50: #fff3d9;
  --color-fernweh-100: #fde7b8;
  --color-fernweh-200: #ebd299;
  --color-fernweh-300: #d7ba78;
  --color-fernweh-400: #b8994f;
  --color-fernweh-500: #9c7c2d;
  --color-fernweh-600: #81630d;
  --color-fernweh-700: #684e00;
  --color-fernweh-800: #523c00;
  --color-fernweh-900: #402e00;
  --color-fernweh-950: #291c00;
  --color-pickled: #b7a65c;
  --color-pickled-50: #fff7d5;
  --color-pickled-100: #f8eec2;
  --color-pickled-200: #e7dba6;
  --color-pickled-300: #d3c588;
  --color-pickled-400: #b7a65c;
  --color-pickled-500: #9a8a40;
  --color-pickled-600: #7e6e22;
  --color-pickled-700: #665709;
  --color-pickled-800: #504300;
  --color-pickled-900: #3d3300;
  --color-pickled-950: #261f00;
  --color-zombie: #d6dcb0;
  --color-zombie-50: #f4f8df;
  --color-zombie-100: #eaeed3;
  --color-zombie-200: #d6dcb0;
  --color-zombie-300: #c0c5a0;
  --color-zombie-400: #a0a67d;
  --color-zombie-500: #858a61;
  --color-zombie-600: #6b7048;
  --color-zombie-700: #555935;
  --color-zombie-800: #424526;
  --color-zombie-900: #32351b;
  --color-zombie-950: #1f210e;
}