Mochaccino to Shadow Play color palette

9E5600Mochaccino D0765CBrown Sugar Glaze 603E15Brown D7B251Luxurious F7DCADDumpling 2E120BShadow Play

Open in generator Export PNG, PDF, ASE…

About this palette

Mochaccino to Shadow Play is a 6-color warm, earthy, vintage palette: #9E5600 (Mochaccino), #D0765C (Brown Sugar Glaze), #603E15 (Brown), #D7B251 (Luxurious), #F7DCAD (Dumpling), #2E120B (Shadow Play). It mixes brown, red, yellow tones and feels warm overall. The strongest text pairing is #F7DCAD on #2E120B with a contrast ratio of 13.08:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mochaccino	rgb(158, 86, 0)	hsl(33, 100%, 31%)
Brown Sugar Glaze	rgb(208, 118, 92)	hsl(13, 55%, 59%)
Brown	rgb(96, 62, 21)	hsl(33, 64%, 23%)
Luxurious	rgb(215, 178, 81)	hsl(43, 63%, 58%)
Dumpling	rgb(247, 220, 173)	hsl(38, 82%, 82%)
Shadow Play	rgb(46, 18, 11)	hsl(12, 61%, 11%)

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.08:1 Super#F7DCAD on #2E120B
Aa13.08:1 Super#2E120B on #F7DCAD
Aa8.59:1 Very good#D7B251 on #2E120B
Aa8.59:1 Very good#2E120B on #D7B251
Aa7.19:1 Very good#603E15 on #F7DCAD
Aa7.19:1 Very good#F7DCAD on #603E15
Aa5.32:1 Good#D0765C on #2E120B
Aa5.32:1 Good#2E120B on #D0765C

Color blindness preview

CSS variables

/* Mochaccino to Shadow Play — https://swatchly.xyz/palette/9e5600-d0765c-603e15-d7b251-f7dcad-2e120b */
:root {
  --mochaccino: #9e5600;
  --brown-sugar-glaze: #d0765c;
  --brown: #603e15;
  --luxurious: #d7b251;
  --dumpling: #f7dcad;
  --shadow-play: #2e120b;
}

Tailwind CSS v4

/* Mochaccino to Shadow Play — https://swatchly.xyz/palette/9e5600-d0765c-603e15-d7b251-f7dcad-2e120b */
@theme {
  --color-mochaccino: #9e5600;
  --color-mochaccino-50: #fff3e9;
  --color-mochaccino-100: #ffe6d3;
  --color-mochaccino-200: #ffcba3;
  --color-mochaccino-300: #f4b079;
  --color-mochaccino-400: #d78e4f;
  --color-mochaccino-500: #bb712c;
  --color-mochaccino-600: #9e5600;
  --color-mochaccino-700: #7e4300;
  --color-mochaccino-800: #643400;
  --color-mochaccino-900: #4e2700;
  --color-mochaccino-950: #321700;
  --color-brown-sugar-glaze: #d0765c;
  --color-brown-sugar-glaze-50: #fff5f2;
  --color-brown-sugar-glaze-100: #ffeae4;
  --color-brown-sugar-glaze-200: #ffd2c5;
  --color-brown-sugar-glaze-300: #ffb59f;
  --color-brown-sugar-glaze-400: #e99279;
  --color-brown-sugar-glaze-500: #d0765c;
  --color-brown-sugar-glaze-600: #af5940;
  --color-brown-sugar-glaze-700: #91422b;
  --color-brown-sugar-glaze-800: #752f1b;
  --color-brown-sugar-glaze-900: #5c210f;
  --color-brown-sugar-glaze-950: #3c1105;
  --color-brown: #603e15;
  --color-brown-50: #fff3e7;
  --color-brown-100: #ffe7ce;
  --color-brown-200: #f0d1b2;
  --color-brown-300: #ddbb97;
  --color-brown-400: #c19b74;
  --color-brown-500: #a68058;
  --color-brown-600: #8b673f;
  --color-brown-700: #72512d;
  --color-brown-800: #603e15;
  --color-brown-900: #493014;
  --color-brown-950: #2f1d08;
  --color-luxurious: #d7b251;
  --color-luxurious-50: #ffefc7;
  --color-luxurious-100: #fbe2a6;
  --color-luxurious-200: #e9cc84;
  --color-luxurious-300: #d7b251;
  --color-luxurious-400: #b89433;
  --color-luxurious-500: #9e7a00;
  --color-luxurious-600: #806300;
  --color-luxurious-700: #674f00;
  --color-luxurious-800: #523e00;
  --color-luxurious-900: #413000;
  --color-luxurious-950: #291d00;
  --color-dumpling: #f7dcad;
  --color-dumpling-50: #fffaf2;
  --color-dumpling-100: #fff0d7;
  --color-dumpling-200: #f7dcad;
  --color-dumpling-300: #dac59f;
  --color-dumpling-400: #bba379;
  --color-dumpling-500: #9f865a;
  --color-dumpling-600: #826a3f;
  --color-dumpling-700: #68532b;
  --color-dumpling-800: #523f1c;
  --color-dumpling-900: #403012;
  --color-dumpling-950: #291d08;
  --color-shadow-play: #2e120b;
  --color-shadow-play-50: #fff2ee;
  --color-shadow-play-100: #fee5de;
  --color-shadow-play-200: #eed0c8;
  --color-shadow-play-300: #dab8af;
  --color-shadow-play-400: #bc988e;
  --color-shadow-play-500: #a07b72;
  --color-shadow-play-600: #836158;
  --color-shadow-play-700: #694a42;
  --color-shadow-play-800: #523831;
  --color-shadow-play-900: #3f2923;
  --color-shadow-play-950: #2e120b;
}