Ginger Ale to Close but No Cigar color palette

CCA862Ginger Ale 624400Very Coffee FFE7BDCreamy Apricot B38100Arrowwood 302000Close but No Cigar

About this palette

Ginger Ale to Close but No Cigar is a 5-color warm, earthy, vintage, monochromatic palette: #CCA862 (Ginger Ale), #624400 (Very Coffee), #FFE7BD (Creamy Apricot), #B38100 (Arrowwood), #302000 (Close but No Cigar). It mixes yellow, brown tones and feels warm overall. The strongest text pairing is #FFE7BD on #302000 with a contrast ratio of 13.07:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Ginger Ale	rgb(204, 168, 98)	hsl(40, 51%, 59%)
Very Coffee	rgb(98, 68, 0)	hsl(42, 100%, 19%)
Creamy Apricot	rgb(255, 231, 189)	hsl(38, 100%, 87%)
Arrowwood	rgb(179, 129, 0)	hsl(43, 100%, 35%)
Close but No Cigar	rgb(48, 32, 0)	hsl(40, 100%, 9%)

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.

Aa13.07:1 Super#FFE7BD on #302000
Aa13.07:1 Super#302000 on #FFE7BD
Aa7.42:1 Very good#624400 on #FFE7BD
Aa7.42:1 Very good#FFE7BD on #624400
Aa7.01:1 Very good#CCA862 on #302000
Aa7.01:1 Very good#302000 on #CCA862
Aa4.55:1 Good#B38100 on #302000
Aa4.55:1 Good#302000 on #B38100

Color blindness preview

CSS variables

/* Ginger Ale to Close but No Cigar — https://swatchly.xyz/palette/cca862-624400-ffe7bd-b38100-302000 */
:root {
  --ginger-ale: #cca862;
  --very-coffee: #624400;
  --creamy-apricot: #ffe7bd;
  --arrowwood: #b38100;
  --close-but-no-cigar: #302000;
}

Tailwind CSS v4

/* Ginger Ale to Close but No Cigar — https://swatchly.xyz/palette/cca862-624400-ffe7bd-b38100-302000 */
@theme {
  --color-ginger-ale: #cca862;
  --color-ginger-ale-50: #fff9ed;
  --color-ginger-ale-100: #fff0d4;
  --color-ginger-ale-200: #f6ddad;
  --color-ginger-ale-300: #e5c790;
  --color-ginger-ale-400: #cca862;
  --color-ginger-ale-500: #ad8a45;
  --color-ginger-ale-600: #8f6d25;
  --color-ginger-ale-700: #74550a;
  --color-ginger-ale-800: #5b4100;
  --color-ginger-ale-900: #453100;
  --color-ginger-ale-950: #2b1d00;
  --color-very-coffee: #624400;
  --color-very-coffee-50: #fff4e1;
  --color-very-coffee-100: #fee8c4;
  --color-very-coffee-200: #eed4a9;
  --color-very-coffee-300: #dbbe8e;
  --color-very-coffee-400: #bf9f69;
  --color-very-coffee-500: #a6854c;
  --color-very-coffee-600: #8b6c33;
  --color-very-coffee-700: #745720;
  --color-very-coffee-800: #624400;
  --color-very-coffee-900: #4b3507;
  --color-very-coffee-950: #312101;
  --color-creamy-apricot: #ffe7bd;
  --color-creamy-apricot-50: #fff3de;
  --color-creamy-apricot-100: #ffe7bd;
  --color-creamy-apricot-200: #e6d4b6;
  --color-creamy-apricot-300: #d1be9b;
  --color-creamy-apricot-400: #b49e78;
  --color-creamy-apricot-500: #98835c;
  --color-creamy-apricot-600: #7d6843;
  --color-creamy-apricot-700: #655230;
  --color-creamy-apricot-800: #504021;
  --color-creamy-apricot-900: #3e3017;
  --color-creamy-apricot-950: #281e0b;
  --color-arrowwood: #b38100;
  --color-arrowwood-50: #fff5e3;
  --color-arrowwood-100: #ffeac6;
  --color-arrowwood-200: #fad491;
  --color-arrowwood-300: #e9bd6e;
  --color-arrowwood-400: #cd9d3d;
  --color-arrowwood-500: #b38100;
  --color-arrowwood-600: #916700;
  --color-arrowwood-700: #735200;
  --color-arrowwood-800: #5a3f00;
  --color-arrowwood-900: #463000;
  --color-arrowwood-950: #2c1d00;
  --color-close-but-no-cigar: #302000;
  --color-close-but-no-cigar-50: #fff4e0;
  --color-close-but-no-cigar-100: #f7ead3;
  --color-close-but-no-cigar-200: #e5d5bb;
  --color-close-but-no-cigar-300: #d0bfa0;
  --color-close-but-no-cigar-400: #b29f7e;
  --color-close-but-no-cigar-500: #978463;
  --color-close-but-no-cigar-600: #7d6b4a;
  --color-close-but-no-cigar-700: #665537;
  --color-close-but-no-cigar-800: #524328;
  --color-close-but-no-cigar-900: #41341d;
  --color-close-but-no-cigar-950: #302000;
}