Glazed Chestnut to Pineapple color palette

8F7900Glazed Chestnut AE995EKathmandu D2B266Canadian Maple A37E17Bronze FEE493Banana Republic 534200Pineapple

Open in generator Export PNG, PDF, ASE…

About this palette

Glazed Chestnut to Pineapple is a 6-color warm, earthy, monochromatic palette: #8F7900 (Glazed Chestnut), #AE995E (Kathmandu), #D2B266 (Canadian Maple), #A37E17 (Bronze), #FEE493 (Banana Republic), #534200 (Pineapple). It mixes yellow, brown tones and feels warm overall. The strongest text pairing is #FEE493 on #534200 with a contrast ratio of 7.79:1, and 2 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Glazed Chestnut	rgb(143, 121, 0)	hsl(51, 100%, 28%)
Kathmandu	rgb(174, 153, 94)	hsl(44, 33%, 53%)
Canadian Maple	rgb(210, 178, 102)	hsl(42, 55%, 61%)
Bronze	rgb(163, 126, 23)	hsl(44, 75%, 36%)
Banana Republic	rgb(254, 228, 147)	hsl(45, 98%, 79%)
Pineapple	rgb(83, 66, 0)	hsl(48, 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.

Aa7.79:1 Very good#FEE493 on #534200
Aa7.79:1 Very good#534200 on #FEE493
Aa4.80:1 Good#D2B266 on #534200
Aa4.80:1 Good#534200 on #D2B266
Aa3.50:1 Poor#AE995E on #534200
Aa3.50:1 Poor#534200 on #AE995E
Aa3.41:1 Poor#8F7900 on #FEE493
Aa3.41:1 Poor#FEE493 on #8F7900

Color blindness preview

CSS variables

/* Glazed Chestnut to Pineapple — https://swatchly.xyz/palette/8f7900-ae995e-d2b266-a37e17-fee493-534200 */
:root {
  --glazed-chestnut: #8f7900;
  --kathmandu: #ae995e;
  --canadian-maple: #d2b266;
  --bronze: #a37e17;
  --banana-republic: #fee493;
  --pineapple: #534200;
}

Tailwind CSS v4

/* Glazed Chestnut to Pineapple — https://swatchly.xyz/palette/8f7900-ae995e-d2b266-a37e17-fee493-534200 */
@theme {
  --color-glazed-chestnut: #8f7900;
  --color-glazed-chestnut-50: #fff4c3;
  --color-glazed-chestnut-100: #f5e7ac;
  --color-glazed-chestnut-200: #e2d18a;
  --color-glazed-chestnut-300: #ccb866;
  --color-glazed-chestnut-400: #ac9736;
  --color-glazed-chestnut-500: #8f7900;
  --color-glazed-chestnut-600: #736100;
  --color-glazed-chestnut-700: #5c4d00;
  --color-glazed-chestnut-800: #493c00;
  --color-glazed-chestnut-900: #392f00;
  --color-glazed-chestnut-950: #241d00;
  --color-kathmandu: #ae995e;
  --color-kathmandu-50: #fef2d0;
  --color-kathmandu-100: #f5e7c0;
  --color-kathmandu-200: #e2d2a4;
  --color-kathmandu-300: #cdba86;
  --color-kathmandu-400: #ae995e;
  --color-kathmandu-500: #937f44;
  --color-kathmandu-600: #79662c;
  --color-kathmandu-700: #62501a;
  --color-kathmandu-800: #4e3f0d;
  --color-kathmandu-900: #3e3005;
  --color-kathmandu-950: #281e02;
  --color-canadian-maple: #d2b266;
  --color-canadian-maple-50: #ffeec7;
  --color-canadian-maple-100: #f7e2b0;
  --color-canadian-maple-200: #e5cb91;
  --color-canadian-maple-300: #d2b266;
  --color-canadian-maple-400: #b3954b;
  --color-canadian-maple-500: #997b2d;
  --color-canadian-maple-600: #7f620f;
  --color-canadian-maple-700: #674e00;
  --color-canadian-maple-800: #523d00;
  --color-canadian-maple-900: #413000;
  --color-canadian-maple-950: #291d00;
  --color-bronze: #a37e17;
  --color-bronze-50: #fff4db;
  --color-bronze-100: #ffe8b5;
  --color-bronze-200: #f0d392;
  --color-bronze-300: #dcbb6f;
  --color-bronze-400: #bf9a42;
  --color-bronze-500: #a37e17;
  --color-bronze-600: #856500;
  --color-bronze-700: #6a5000;
  --color-bronze-800: #533e00;
  --color-bronze-900: #412f00;
  --color-bronze-950: #291d00;
  --color-banana-republic: #fee493;
  --color-banana-republic-50: #fff0c2;
  --color-banana-republic-100: #fee493;
  --color-banana-republic-200: #e5d296;
  --color-banana-republic-300: #d2bc78;
  --color-banana-republic-400: #b59d50;
  --color-banana-republic-500: #9b8230;
  --color-banana-republic-600: #806810;
  --color-banana-republic-700: #675300;
  --color-banana-republic-800: #514000;
  --color-banana-republic-900: #3f3100;
  --color-banana-republic-950: #281e00;
  --color-pineapple: #534200;
  --color-pineapple-50: #fff5d6;
  --color-pineapple-100: #f7ebc7;
  --color-pineapple-200: #e5d7ac;
  --color-pineapple-300: #d1c190;
  --color-pineapple-400: #b3a16b;
  --color-pineapple-500: #98864d;
  --color-pineapple-600: #7d6c34;
  --color-pineapple-700: #655521;
  --color-pineapple-800: #534200;
  --color-pineapple-900: #3f3309;
  --color-pineapple-950: #281f03;
}