Mochaccino to Caramel Coating Color Palette

About this palette

Mochaccino to Caramel Coating is a 5-color warm, earthy, monochromatic palette: #935700 (Mochaccino), #FFAB41 (Safflower), #643900 (Brown), #FFE6CD (Bisque), #C07100 (Caramel Coating). It mixes brown, orange tones and feels warm overall. The strongest text pairing is #643900 on #FFE6CD with a contrast ratio of 8.20:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mochaccino	rgb(147, 87, 0)	hsl(36, 100%, 29%)
Safflower	rgb(255, 171, 65)	hsl(33, 100%, 63%)
Brown	rgb(100, 57, 0)	hsl(34, 100%, 20%)
Bisque	rgb(255, 230, 205)	hsl(30, 100%, 90%)
Caramel Coating	rgb(192, 113, 0)	hsl(35, 100%, 38%)

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.20:1 Very good#643900 on #FFE6CD
Aa8.20:1 Very good#FFE6CD on #643900
Aa5.24:1 Good#FFAB41 on #643900
Aa5.24:1 Good#643900 on #FFAB41
Aa4.84:1 Good#935700 on #FFE6CD
Aa4.84:1 Good#FFE6CD on #935700
Aa3.11:1 Poor#FFE6CD on #C07100
Aa3.11:1 Poor#C07100 on #FFE6CD

Color blindness preview

CSS variables

/* Mochaccino to Caramel Coating — https://swatchly.xyz/palette/935700-ffab41-643900-ffe6cd-c07100 */
:root {
  --mochaccino: #935700;
  --safflower: #ffab41;
  --brown: #643900;
  --bisque: #ffe6cd;
  --caramel-coating: #c07100;
}

Tailwind CSS v4

/* Mochaccino to Caramel Coating — https://swatchly.xyz/palette/935700-ffab41-643900-ffe6cd-c07100 */
@theme {
  --color-mochaccino: #935700;
  --color-mochaccino-50: #fff3e7;
  --color-mochaccino-100: #ffe5cd;
  --color-mochaccino-200: #fecb99;
  --color-mochaccino-300: #ebb178;
  --color-mochaccino-400: #cd8f4e;
  --color-mochaccino-500: #b1722c;
  --color-mochaccino-600: #935700;
  --color-mochaccino-700: #754400;
  --color-mochaccino-800: #5d3500;
  --color-mochaccino-900: #482800;
  --color-mochaccino-950: #2f1800;
  --color-safflower: #ffab41;
  --color-safflower-50: #fff2e5;
  --color-safflower-100: #ffe5cb;
  --color-safflower-200: #ffcc94;
  --color-safflower-300: #ffab41;
  --color-safflower-400: #db8d1f;
  --color-safflower-500: #b97300;
  --color-safflower-600: #965c00;
  --color-safflower-700: #784900;
  --color-safflower-800: #5f3800;
  --color-safflower-900: #4a2b00;
  --color-safflower-950: #2f1a00;
  --color-brown: #643900;
  --color-brown-50: #fff3e8;
  --color-brown-100: #ffe6d0;
  --color-brown-200: #f6cfab;
  --color-brown-300: #e4b88f;
  --color-brown-400: #c7986a;
  --color-brown-500: #ac7c4d;
  --color-brown-600: #906234;
  --color-brown-700: #764d21;
  --color-brown-800: #643900;
  --color-brown-900: #4c2d09;
  --color-brown-950: #311b03;
  --color-bisque: #ffe6cd;
  --color-bisque-50: #fff2e6;
  --color-bisque-100: #ffe6cd;
  --color-bisque-200: #e6d4c1;
  --color-bisque-300: #d1bda8;
  --color-bisque-400: #b39d86;
  --color-bisque-500: #98826b;
  --color-bisque-600: #7d6752;
  --color-bisque-700: #64513e;
  --color-bisque-800: #503f2e;
  --color-bisque-900: #3e3021;
  --color-bisque-950: #271d13;
  --color-caramel-coating: #c07100;
  --color-caramel-coating-50: #fff3e8;
  --color-caramel-coating-100: #ffe7d1;
  --color-caramel-coating-200: #ffcd9f;
  --color-caramel-coating-300: #f7b06b;
  --color-caramel-coating-400: #dc8e3b;
  --color-caramel-coating-500: #c07100;
  --color-caramel-coating-600: #9b5a00;
  --color-caramel-coating-700: #7c4700;
  --color-caramel-coating-800: #623700;
  --color-caramel-coating-900: #4c2900;
  --color-caramel-coating-950: #311900;
}