Start generating

Muesli to Wild Chocolate color palette

9E7E56MuesliE4B8B2Salmon GlowFFE7E7Porcelain Skin7C9EAAMonsoon Season294E5ASunken Mystery6B5233Wild Chocolate
Open in generator Export PNG, PDF, ASE…

About this palette

Muesli to Wild Chocolate is a 6-color muted, vintage palette: #9E7E56 (Muesli), #E4B8B2 (Salmon Glow), #FFE7E7 (Porcelain Skin), #7C9EAA (Monsoon Season), #294E5A (Sunken Mystery), #6B5233 (Wild Chocolate). It mixes orange, pink, white, blue, brown tones and feels warm overall. The strongest text pairing is #FFE7E7 on #294E5A with a contrast ratio of 7.65:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Mueslirgb(158, 126, 86)hsl(33, 30%, 48%)
Salmon Glowrgb(228, 184, 178)hsl(7, 48%, 80%)
Porcelain Skinrgb(255, 231, 231)hsl(0, 100%, 95%)
Monsoon Seasonrgb(124, 158, 170)hsl(196, 21%, 58%)
Sunken Mysteryrgb(41, 78, 90)hsl(195, 37%, 26%)
Wild Chocolatergb(107, 82, 51)hsl(33, 35%, 31%)

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.65:1 Very good#FFE7E7 on #294E5A
  • Aa7.65:1 Very good#294E5A on #FFE7E7
  • Aa6.19:1 Good#FFE7E7 on #6B5233
  • Aa6.19:1 Good#6B5233 on #FFE7E7
  • Aa5.06:1 Good#E4B8B2 on #294E5A
  • Aa5.06:1 Good#294E5A on #E4B8B2
  • Aa4.10:1 Poor#E4B8B2 on #6B5233
  • Aa4.10:1 Poor#6B5233 on #E4B8B2

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Muesli to Wild Chocolate — https://swatchly.xyz/palette/9e7e56-e4b8b2-ffe7e7-7c9eaa-294e5a-6b5233 */
:root {
  --muesli: #9e7e56;
  --salmon-glow: #e4b8b2;
  --porcelain-skin: #ffe7e7;
  --monsoon-season: #7c9eaa;
  --sunken-mystery: #294e5a;
  --wild-chocolate: #6b5233;
}

Tailwind CSS v4

/* Muesli to Wild Chocolate — https://swatchly.xyz/palette/9e7e56-e4b8b2-ffe7e7-7c9eaa-294e5a-6b5233 */
@theme {
  --color-muesli: #9e7e56;
  --color-muesli-50: #fff3e4;
  --color-muesli-100: #fde7cc;
  --color-muesli-200: #ecd2b3;
  --color-muesli-300: #d8ba97;
  --color-muesli-400: #ba9a73;
  --color-muesli-500: #9e7e56;
  --color-muesli-600: #82643e;
  --color-muesli-700: #6a4e2b;
  --color-muesli-800: #543c1d;
  --color-muesli-900: #422e13;
  --color-muesli-950: #2a1c08;
  --color-salmon-glow: #e4b8b2;
  --color-salmon-glow-50: #fff4f2;
  --color-salmon-glow-100: #ffe7e4;
  --color-salmon-glow-200: #f2d1cd;
  --color-salmon-glow-300: #e4b8b2;
  --color-salmon-glow-400: #c19993;
  --color-salmon-glow-500: #a57d77;
  --color-salmon-glow-600: #89625d;
  --color-salmon-glow-700: #6f4c48;
  --color-salmon-glow-800: #583a36;
  --color-salmon-glow-900: #452b28;
  --color-salmon-glow-950: #2c1a18;
  --color-porcelain-skin: #ffe7e7;
  --color-porcelain-skin-50: #fff4f4;
  --color-porcelain-skin-100: #ffe7e7;
  --color-porcelain-skin-200: #e6d5d5;
  --color-porcelain-skin-300: #d1bdbd;
  --color-porcelain-skin-400: #b29d9d;
  --color-porcelain-skin-500: #968181;
  --color-porcelain-skin-600: #7b6667;
  --color-porcelain-skin-700: #625050;
  --color-porcelain-skin-800: #4e3e3e;
  --color-porcelain-skin-900: #3c2f2f;
  --color-porcelain-skin-950: #261c1d;
  --color-monsoon-season: #7c9eaa;
  --color-monsoon-season-50: #e1f6fd;
  --color-monsoon-season-100: #d3eaf3;
  --color-monsoon-season-200: #bbd6e0;
  --color-monsoon-season-300: #a0bec9;
  --color-monsoon-season-400: #7c9eaa;
  --color-monsoon-season-500: #638490;
  --color-monsoon-season-600: #4c6b76;
  --color-monsoon-season-700: #395660;
  --color-monsoon-season-800: #2b444c;
  --color-monsoon-season-900: #20353c;
  --color-monsoon-season-950: #122227;
  --color-sunken-mystery: #294e5a;
  --color-sunken-mystery-50: #e7f9ff;
  --color-sunken-mystery-100: #d7f0f9;
  --color-sunken-mystery-200: #c0dde8;
  --color-sunken-mystery-300: #a7c9d4;
  --color-sunken-mystery-400: #85abb8;
  --color-sunken-mystery-500: #6a909e;
  --color-sunken-mystery-600: #517683;
  --color-sunken-mystery-700: #3d606c;
  --color-sunken-mystery-800: #294e5a;
  --color-sunken-mystery-900: #213c45;
  --color-sunken-mystery-950: #12262c;
  --color-wild-chocolate: #6b5233;
  --color-wild-chocolate-50: #fff3e5;
  --color-wild-chocolate-100: #fae8d2;
  --color-wild-chocolate-200: #ead4bb;
  --color-wild-chocolate-300: #d6bda0;
  --color-wild-chocolate-400: #b89e7e;
  --color-wild-chocolate-500: #9d8262;
  --color-wild-chocolate-600: #826849;
  --color-wild-chocolate-700: #6b5233;
  --color-wild-chocolate-800: #544026;
  --color-wild-chocolate-900: #42301b;
  --color-wild-chocolate-950: #2a1d0e;
}

Similar palettes