Dust Storm to Mysterious Mixture color palette

E8D1B6Dust Storm F2AA78Charming Peach B687A7Voila!477D5DAmazon 0E5387Dark Denim 164C20Mysterious Mixture

Open in generator Export PNG, PDF, ASE…

About this palette

Dust Storm to Mysterious Mixture is a 6-color earthy, vintage palette: #E8D1B6 (Dust Storm), #F2AA78 (Charming Peach), #B687A7 (Voila!), #477D5D (Amazon), #0E5387 (Dark Denim), #164C20 (Mysterious Mixture). It mixes orange, pink, green, blue tones and feels balanced overall. The strongest text pairing is #E8D1B6 on #164C20 with a contrast ratio of 6.81:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Dust Storm	rgb(232, 209, 182)	hsl(32, 52%, 81%)
Charming Peach	rgb(242, 170, 120)	hsl(25, 82%, 71%)
Voila!	rgb(182, 135, 167)	hsl(319, 24%, 62%)
Amazon	rgb(71, 125, 93)	hsl(144, 28%, 38%)
Dark Denim	rgb(14, 83, 135)	hsl(206, 81%, 29%)
Mysterious Mixture	rgb(22, 76, 32)	hsl(131, 55%, 19%)

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.

Aa6.81:1 Good#E8D1B6 on #164C20
Aa6.81:1 Good#164C20 on #E8D1B6
Aa5.46:1 Good#E8D1B6 on #0E5387
Aa5.46:1 Good#0E5387 on #E8D1B6
Aa5.17:1 Good#F2AA78 on #164C20
Aa5.17:1 Good#164C20 on #F2AA78
Aa4.14:1 Poor#F2AA78 on #0E5387
Aa4.14:1 Poor#0E5387 on #F2AA78

Color blindness preview

CSS variables

/* Dust Storm to Mysterious Mixture — https://swatchly.xyz/palette/e8d1b6-f2aa78-b687a7-477d5d-0e5387-164c20 */
:root {
  --dust-storm: #e8d1b6;
  --charming-peach: #f2aa78;
  --voila: #b687a7;
  --amazon: #477d5d;
  --dark-denim: #0e5387;
  --mysterious-mixture: #164c20;
}

Tailwind CSS v4

/* Dust Storm to Mysterious Mixture — https://swatchly.xyz/palette/e8d1b6-f2aa78-b687a7-477d5d-0e5387-164c20 */
@theme {
  --color-dust-storm: #e8d1b6;
  --color-dust-storm-50: #fef1e2;
  --color-dust-storm-100: #f5e7d5;
  --color-dust-storm-200: #e8d1b6;
  --color-dust-storm-300: #cfbba5;
  --color-dust-storm-400: #b19c83;
  --color-dust-storm-500: #968168;
  --color-dust-storm-600: #7b674f;
  --color-dust-storm-700: #63513c;
  --color-dust-storm-800: #4f3f2c;
  --color-dust-storm-900: #3d3020;
  --color-dust-storm-950: #271d12;
  --color-charming-peach: #f2aa78;
  --color-charming-peach-50: #ffefe5;
  --color-charming-peach-100: #ffe2ce;
  --color-charming-peach-200: #ffc6a0;
  --color-charming-peach-300: #f2aa78;
  --color-charming-peach-400: #d08c5d;
  --color-charming-peach-500: #b47140;
  --color-charming-peach-600: #975826;
  --color-charming-peach-700: #7d4313;
  --color-charming-peach-800: #653205;
  --color-charming-peach-900: #502600;
  --color-charming-peach-950: #341600;
  --color-voila: #b687a7;
  --color-voila-50: #ffebf8;
  --color-voila-100: #fcdbf1;
  --color-voila-200: #eac3dd;
  --color-voila-300: #d5a9c7;
  --color-voila-400: #b687a7;
  --color-voila-500: #9b6e8d;
  --color-voila-600: #805673;
  --color-voila-700: #69435d;
  --color-voila-800: #54334a;
  --color-voila-900: #43273a;
  --color-voila-950: #2c1726;
  --color-amazon: #477d5d;
  --color-amazon-50: #dffeea;
  --color-amazon-100: #d3f6df;
  --color-amazon-200: #bbe5ca;
  --color-amazon-300: #a1d0b2;
  --color-amazon-400: #7eb292;
  --color-amazon-500: #619876;
  --color-amazon-600: #477d5d;
  --color-amazon-700: #336448;
  --color-amazon-800: #234f36;
  --color-amazon-900: #173d28;
  --color-amazon-950: #0b2717;
  --color-dark-denim: #0e5387;
  --color-dark-denim-50: #edf6ff;
  --color-dark-denim-100: #dceeff;
  --color-dark-denim-200: #b6dbff;
  --color-dark-denim-300: #8ec5f8;
  --color-dark-denim-400: #68a4dc;
  --color-dark-denim-500: #4987bf;
  --color-dark-denim-600: #2e6ba0;
  --color-dark-denim-700: #0e5387;
  --color-dark-denim-800: #0d4169;
  --color-dark-denim-900: #053254;
  --color-dark-denim-950: #011e37;
  --color-mysterious-mixture: #164c20;
  --color-mysterious-mixture-50: #e0ffe2;
  --color-mysterious-mixture-100: #d3f6d5;
  --color-mysterious-mixture-200: #bbe4be;
  --color-mysterious-mixture-300: #9fcfa3;
  --color-mysterious-mixture-400: #7bb080;
  --color-mysterious-mixture-500: #5e9464;
  --color-mysterious-mixture-600: #44784a;
  --color-mysterious-mixture-700: #305f36;
  --color-mysterious-mixture-800: #164c20;
  --color-mysterious-mixture-900: #16391b;
  --color-mysterious-mixture-950: #0b240e;
}