Dune to Porcelain Skin color palette

D6BCA2Dune 624A47Dark Chocolate 816469Opera 433029Six Feet Under A38B76Gramps Shoehorn FDE4E9Porcelain Skin

Open in generator Export PNG, PDF, ASE…

About this palette

Dune to Porcelain Skin is a 6-color muted palette: #D6BCA2 (Dune), #624A47 (Dark Chocolate), #816469 (Opera), #433029 (Six Feet Under), #A38B76 (Gramps Shoehorn), #FDE4E9 (Porcelain Skin). It mixes orange, gray, red, white tones and feels warm overall. The strongest text pairing is #433029 on #FDE4E9 with a contrast ratio of 10.30:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Dune	rgb(214, 188, 162)	hsl(30, 39%, 74%)
Dark Chocolate	rgb(98, 74, 71)	hsl(7, 16%, 33%)
Opera	rgb(129, 100, 105)	hsl(350, 13%, 45%)
Six Feet Under	rgb(67, 48, 41)	hsl(16, 24%, 21%)
Gramps Shoehorn	rgb(163, 139, 118)	hsl(28, 20%, 55%)
Porcelain Skin	rgb(253, 228, 233)	hsl(348, 86%, 94%)

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.

Aa10.30:1 Very good#433029 on #FDE4E9
Aa10.30:1 Very good#FDE4E9 on #433029
Aa6.83:1 Good#D6BCA2 on #433029
Aa6.83:1 Good#433029 on #D6BCA2
Aa6.74:1 Good#624A47 on #FDE4E9
Aa6.74:1 Good#FDE4E9 on #624A47
Aa4.47:1 Poor#D6BCA2 on #624A47
Aa4.47:1 Poor#624A47 on #D6BCA2

Color blindness preview

CSS variables

/* Dune to Porcelain Skin — https://swatchly.xyz/palette/d6bca2-624a47-816469-433029-a38b76-fde4e9 */
:root {
  --dune: #d6bca2;
  --dark-chocolate: #624a47;
  --opera: #816469;
  --six-feet-under: #433029;
  --gramps-shoehorn: #a38b76;
  --porcelain-skin: #fde4e9;
}

Tailwind CSS v4

/* Dune to Porcelain Skin — https://swatchly.xyz/palette/d6bca2-624a47-816469-433029-a38b76-fde4e9 */
@theme {
  --color-dune: #d6bca2;
  --color-dune-50: #fff3e7;
  --color-dune-100: #f9e8d8;
  --color-dune-200: #e8d4c0;
  --color-dune-300: #d6bca2;
  --color-dune-400: #b59d85;
  --color-dune-500: #9a8169;
  --color-dune-600: #7e6750;
  --color-dune-700: #66513c;
  --color-dune-800: #513f2c;
  --color-dune-900: #3f3020;
  --color-dune-950: #281d11;
  --color-dark-chocolate: #624a47;
  --color-dark-chocolate-50: #fff2f0;
  --color-dark-chocolate-100: #f9e6e4;
  --color-dark-chocolate-200: #e7d1ce;
  --color-dark-chocolate-300: #d1b9b5;
  --color-dark-chocolate-400: #b29894;
  --color-dark-chocolate-500: #967c78;
  --color-dark-chocolate-600: #7a615e;
  --color-dark-chocolate-700: #624a47;
  --color-dark-chocolate-800: #4c3937;
  --color-dark-chocolate-900: #3b2c2a;
  --color-dark-chocolate-950: #251a19;
  --color-opera: #816469;
  --color-opera-50: #fff1f3;
  --color-opera-100: #fae5e9;
  --color-opera-200: #e9d1d5;
  --color-opera-300: #d5b9be;
  --color-opera-400: #b7999e;
  --color-opera-500: #9c7e83;
  --color-opera-600: #816469;
  --color-opera-700: #684e53;
  --color-opera-800: #523c40;
  --color-opera-900: #402d31;
  --color-opera-950: #291b1e;
  --color-six-feet-under: #433029;
  --color-six-feet-under-50: #fff2ed;
  --color-six-feet-under-100: #f7e7e2;
  --color-six-feet-under-200: #e5d3cc;
  --color-six-feet-under-300: #d1bcb4;
  --color-six-feet-under-400: #b39c94;
  --color-six-feet-under-500: #988179;
  --color-six-feet-under-600: #7d6860;
  --color-six-feet-under-700: #65524b;
  --color-six-feet-under-800: #51403a;
  --color-six-feet-under-900: #433029;
  --color-six-feet-under-950: #291e1a;
  --color-gramps-shoehorn: #a38b76;
  --color-gramps-shoehorn-50: #fff5ec;
  --color-gramps-shoehorn-100: #fbecde;
  --color-gramps-shoehorn-200: #ecd9c9;
  --color-gramps-shoehorn-300: #d9c4b1;
  --color-gramps-shoehorn-400: #bca591;
  --color-gramps-shoehorn-500: #a38b76;
  --color-gramps-shoehorn-600: #866f5b;
  --color-gramps-shoehorn-700: #6c5744;
  --color-gramps-shoehorn-800: #554332;
  --color-gramps-shoehorn-900: #423224;
  --color-gramps-shoehorn-950: #291e14;
  --color-porcelain-skin: #fde4e9;
  --color-porcelain-skin-50: #fff1f4;
  --color-porcelain-skin-100: #fde4e9;
  --color-porcelain-skin-200: #e5d2d6;
  --color-porcelain-skin-300: #d0bbbf;
  --color-porcelain-skin-400: #b19b9f;
  --color-porcelain-skin-500: #968084;
  --color-porcelain-skin-600: #7a656a;
  --color-porcelain-skin-700: #624f53;
  --color-porcelain-skin-800: #4e3d41;
  --color-porcelain-skin-900: #3c2f32;
  --color-porcelain-skin-950: #261c1e;
}