Coffee Whip to Peachy-Kini Color Palette

About this palette

Coffee Whip to Peachy-Kini is a 5-color warm, earthy, vintage, monochromatic palette: #E09E65 (Coffee Whip), #44280F (Chocolate Castle), #AA6000 (Ginger), #734118 (Walnut), #F0BF97 (Peachy-Kini). It mixes orange, brown tones and feels warm overall. The strongest text pairing is #44280F on #F0BF97 with a contrast ratio of 8.10:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Coffee Whip	rgb(224, 158, 101)	hsl(28, 66%, 64%)
Chocolate Castle	rgb(68, 40, 15)	hsl(28, 64%, 16%)
Ginger	rgb(170, 96, 0)	hsl(34, 100%, 33%)
Walnut	rgb(115, 65, 24)	hsl(27, 65%, 27%)
Peachy-Kini	rgb(240, 191, 151)	hsl(27, 75%, 77%)

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.

Aa8.10:1 Very good#44280F on #F0BF97
Aa8.10:1 Very good#F0BF97 on #44280F
Aa5.94:1 Good#E09E65 on #44280F
Aa5.94:1 Good#44280F on #E09E65
Aa5.05:1 Good#734118 on #F0BF97
Aa5.05:1 Good#F0BF97 on #734118
Aa3.70:1 Poor#E09E65 on #734118
Aa3.70:1 Poor#734118 on #E09E65

Color blindness preview

CSS variables

/* Coffee Whip to Peachy-Kini — https://swatchly.xyz/palette/e09e65-44280f-aa6000-734118-f0bf97 */
:root {
  --coffee-whip: #e09e65;
  --chocolate-castle: #44280f;
  --ginger: #aa6000;
  --walnut: #734118;
  --peachy-kini: #f0bf97;
}

Tailwind CSS v4

/* Coffee Whip to Peachy-Kini — https://swatchly.xyz/palette/e09e65-44280f-aa6000-734118-f0bf97 */
@theme {
  --color-coffee-whip: #e09e65;
  --color-coffee-whip-50: #fff8f3;
  --color-coffee-whip-100: #ffefe2;
  --color-coffee-whip-200: #ffd8b9;
  --color-coffee-whip-300: #f6bf92;
  --color-coffee-whip-400: #e09e65;
  --color-coffee-whip-500: #bf8048;
  --color-coffee-whip-600: #a06329;
  --color-coffee-whip-700: #834b10;
  --color-coffee-whip-800: #683800;
  --color-coffee-whip-900: #502a00;
  --color-coffee-whip-950: #321800;
  --color-chocolate-castle: #44280f;
  --color-chocolate-castle-50: #fff3e9;
  --color-chocolate-castle-100: #fde6d5;
  --color-chocolate-castle-200: #edd2bd;
  --color-chocolate-castle-300: #d9baa2;
  --color-chocolate-castle-400: #bb997f;
  --color-chocolate-castle-500: #9f7d63;
  --color-chocolate-castle-600: #826349;
  --color-chocolate-castle-700: #684c35;
  --color-chocolate-castle-800: #523a26;
  --color-chocolate-castle-900: #44280f;
  --color-chocolate-castle-950: #27190e;
  --color-ginger: #aa6000;
  --color-ginger-50: #fff3e9;
  --color-ginger-100: #ffe8d6;
  --color-ginger-200: #ffd1aa;
  --color-ginger-300: #f9b67c;
  --color-ginger-400: #df9551;
  --color-ginger-500: #c57a2e;
  --color-ginger-600: #aa6000;
  --color-ginger-700: #884b00;
  --color-ginger-800: #6b3a00;
  --color-ginger-900: #532c00;
  --color-ginger-950: #351a00;
  --color-walnut: #734118;
  --color-walnut-50: #fff2ea;
  --color-walnut-100: #ffe6d5;
  --color-walnut-200: #f9ccad;
  --color-walnut-300: #e5b38f;
  --color-walnut-400: #c7916a;
  --color-walnut-500: #aa744c;
  --color-walnut-600: #8c5933;
  --color-walnut-700: #734118;
  --color-walnut-800: #5a3313;
  --color-walnut-900: #47260b;
  --color-walnut-950: #2d1604;
  --color-peachy-kini: #f0bf97;
  --color-peachy-kini-50: #fff9f3;
  --color-peachy-kini-100: #ffeee1;
  --color-peachy-kini-200: #fbd8bc;
  --color-peachy-kini-300: #f0bf97;
  --color-peachy-kini-400: #cb9f7a;
  --color-peachy-kini-500: #af815b;
  --color-peachy-kini-600: #916540;
  --color-peachy-kini-700: #754e2b;
  --color-peachy-kini-800: #5d3b1c;
  --color-peachy-kini-900: #482b11;
  --color-peachy-kini-950: #2e1a07;
}