Chai Latte to Medium Roast color palette

FAC999Chai Latte C39A75Cardboard A67342Stroopwafel 643C00Brown 855520Precious Copper 362410Medium Roast

Open in generator Export PNG, PDF, ASE…

About this palette

Chai Latte to Medium Roast is a 6-color warm, earthy, vintage, monochromatic palette: #FAC999 (Chai Latte), #C39A75 (Cardboard), #A67342 (Stroopwafel), #643C00 (Brown), #855520 (Precious Copper), #362410 (Medium Roast). It mixes orange, brown tones and feels warm overall. The strongest text pairing is #FAC999 on #362410 with a contrast ratio of 9.80:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Chai Latte	rgb(250, 201, 153)	hsl(30, 91%, 79%)
Cardboard	rgb(195, 154, 117)	hsl(28, 39%, 61%)
Stroopwafel	rgb(166, 115, 66)	hsl(29, 43%, 45%)
Brown	rgb(100, 60, 0)	hsl(36, 100%, 20%)
Precious Copper	rgb(133, 85, 32)	hsl(31, 61%, 32%)
Medium Roast	rgb(54, 36, 16)	hsl(32, 54%, 14%)

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.

Aa9.80:1 Very good#FAC999 on #362410
Aa9.80:1 Very good#362410 on #FAC999
Aa6.34:1 Good#FAC999 on #643C00
Aa6.34:1 Good#643C00 on #FAC999
Aa5.79:1 Good#C39A75 on #362410
Aa5.79:1 Good#362410 on #C39A75
Aa4.18:1 Poor#FAC999 on #855520
Aa4.18:1 Poor#855520 on #FAC999

Color blindness preview

CSS variables

/* Chai Latte to Medium Roast — https://swatchly.xyz/palette/fac999-c39a75-a67342-643c00-855520-362410 */
:root {
  --chai-latte: #fac999;
  --cardboard: #c39a75;
  --stroopwafel: #a67342;
  --brown: #643c00;
  --precious-copper: #855520;
  --medium-roast: #362410;
}

Tailwind CSS v4

/* Chai Latte to Medium Roast — https://swatchly.xyz/palette/fac999-c39a75-a67342-643c00-855520-362410 */
@theme {
  --color-chai-latte: #fac999;
  --color-chai-latte-50: #ffefe1;
  --color-chai-latte-100: #ffe2c7;
  --color-chai-latte-200: #fac999;
  --color-chai-latte-300: #deb58c;
  --color-chai-latte-400: #c29568;
  --color-chai-latte-500: #a77a4c;
  --color-chai-latte-600: #8b6034;
  --color-chai-latte-700: #724b21;
  --color-chai-latte-800: #5b3a14;
  --color-chai-latte-900: #482c0a;
  --color-chai-latte-950: #2e1a03;
  --color-cardboard: #c39a75;
  --color-cardboard-50: #fff3e9;
  --color-cardboard-100: #ffe7d3;
  --color-cardboard-200: #f2d2b6;
  --color-cardboard-300: #dfbb9b;
  --color-cardboard-400: #c39a75;
  --color-cardboard-500: #a67e5a;
  --color-cardboard-600: #896441;
  --color-cardboard-700: #704e2e;
  --color-cardboard-800: #593c1f;
  --color-cardboard-900: #462d14;
  --color-cardboard-950: #2d1b09;
  --color-stroopwafel: #a67342;
  --color-stroopwafel-50: #fff1e5;
  --color-stroopwafel-100: #ffe3cb;
  --color-stroopwafel-200: #f5cba5;
  --color-stroopwafel-300: #e1b186;
  --color-stroopwafel-400: #c39060;
  --color-stroopwafel-500: #a67342;
  --color-stroopwafel-600: #8a5a2a;
  --color-stroopwafel-700: #714619;
  --color-stroopwafel-800: #5b350c;
  --color-stroopwafel-900: #482804;
  --color-stroopwafel-950: #2f1801;
  --color-brown: #643c00;
  --color-brown-50: #fff3e6;
  --color-brown-100: #ffe7cd;
  --color-brown-200: #f4d0ab;
  --color-brown-300: #e2ba8e;
  --color-brown-400: #c59a6a;
  --color-brown-500: #ab7f4d;
  --color-brown-600: #8f6534;
  --color-brown-700: #764f20;
  --color-brown-800: #643c00;
  --color-brown-900: #4c2f08;
  --color-brown-950: #311c02;
  --color-precious-copper: #855520;
  --color-precious-copper-50: #fff3e8;
  --color-precious-copper-100: #ffe4cb;
  --color-precious-copper-200: #f5cba3;
  --color-precious-copper-300: #e0b183;
  --color-precious-copper-400: #c18e5c;
  --color-precious-copper-500: #a3713e;
  --color-precious-copper-600: #855520;
  --color-precious-copper-700: #6b4213;
  --color-precious-copper-800: #563207;
  --color-precious-copper-900: #442602;
  --color-precious-copper-950: #2c1700;
  --color-medium-roast: #362410;
  --color-medium-roast-50: #fff3e7;
  --color-medium-roast-100: #f7e8d9;
  --color-medium-roast-200: #e6d4c2;
  --color-medium-roast-300: #d1bda9;
  --color-medium-roast-400: #b39d87;
  --color-medium-roast-500: #9a846d;
  --color-medium-roast-600: #806b56;
  --color-medium-roast-700: #6a5643;
  --color-medium-roast-800: #574534;
  --color-medium-roast-900: #473828;
  --color-medium-roast-950: #362410;
}