Start generating

Hemp to Ethereal Espresso color palette

987A71HempCD9C96Savoury SalmonF4D2C7Cloud Number Nine66443EBrunette382825Ethereal Espresso
Open in generator Export PNG, PDF, ASE…

About this palette

Hemp to Ethereal Espresso is a 5-color muted, warm, vintage palette: #987A71 (Hemp), #CD9C96 (Savoury Salmon), #F4D2C7 (Cloud Number Nine), #66443E (Brunette), #382825 (Ethereal Espresso). It mixes red, pink, gray tones and feels warm overall. The strongest text pairing is #F4D2C7 on #382825 with a contrast ratio of 9.94:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Hemprgb(152, 122, 113)hsl(14, 16%, 52%)
Savoury Salmonrgb(205, 156, 150)hsl(7, 35%, 70%)
Cloud Number Ninergb(244, 210, 199)hsl(15, 67%, 87%)
Brunettergb(102, 68, 62)hsl(9, 24%, 32%)
Ethereal Espressorgb(56, 40, 37)hsl(9, 20%, 18%)

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.

  • Aa9.94:1 Very good#F4D2C7 on #382825
  • Aa9.94:1 Very good#382825 on #F4D2C7
  • Aa6.05:1 Good#F4D2C7 on #66443E
  • Aa6.05:1 Good#66443E on #F4D2C7
  • Aa5.87:1 Good#CD9C96 on #382825
  • Aa5.87:1 Good#382825 on #CD9C96
  • Aa3.58:1 Poor#987A71 on #382825
  • Aa3.58:1 Poor#382825 on #987A71

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Hemp to Ethereal Espresso — https://swatchly.xyz/palette/987a71-cd9c96-f4d2c7-66443e-382825 */
:root {
  --hemp: #987a71;
  --savoury-salmon: #cd9c96;
  --cloud-number-nine: #f4d2c7;
  --brunette: #66443e;
  --ethereal-espresso: #382825;
}

Tailwind CSS v4

/* Hemp to Ethereal Espresso — https://swatchly.xyz/palette/987a71-cd9c96-f4d2c7-66443e-382825 */
@theme {
  --color-hemp: #987a71;
  --color-hemp-50: #fff1ed;
  --color-hemp-100: #fae4de;
  --color-hemp-200: #e8cfc7;
  --color-hemp-300: #d3b7ae;
  --color-hemp-400: #b4968d;
  --color-hemp-500: #987a71;
  --color-hemp-600: #7d6158;
  --color-hemp-700: #654c44;
  --color-hemp-800: #503b34;
  --color-hemp-900: #3f2d27;
  --color-hemp-950: #281b17;
  --color-savoury-salmon: #cd9c96;
  --color-savoury-salmon-50: #fff6f4;
  --color-savoury-salmon-100: #ffeae7;
  --color-savoury-salmon-200: #f8d3cf;
  --color-savoury-salmon-300: #e7bdb7;
  --color-savoury-salmon-400: #cd9c96;
  --color-savoury-salmon-500: #ae7f7a;
  --color-savoury-salmon-600: #91645f;
  --color-savoury-salmon-700: #754d48;
  --color-savoury-salmon-800: #5d3a36;
  --color-savoury-salmon-900: #482b28;
  --color-savoury-salmon-950: #2e1917;
  --color-cloud-number-nine: #f4d2c7;
  --color-cloud-number-nine-50: #fff5f1;
  --color-cloud-number-nine-100: #fee9e2;
  --color-cloud-number-nine-200: #f4d2c7;
  --color-cloud-number-nine-300: #d8bcb3;
  --color-cloud-number-nine-400: #ba9c92;
  --color-cloud-number-nine-500: #9e8076;
  --color-cloud-number-nine-600: #82655c;
  --color-cloud-number-nine-700: #694f46;
  --color-cloud-number-nine-800: #533c35;
  --color-cloud-number-nine-900: #412e27;
  --color-cloud-number-nine-950: #291b17;
  --color-brunette: #66443e;
  --color-brunette-50: #fff2ef;
  --color-brunette-100: #ffe4df;
  --color-brunette-200: #edcec8;
  --color-brunette-300: #d8b5ae;
  --color-brunette-400: #b9938c;
  --color-brunette-500: #9c7670;
  --color-brunette-600: #7e5c55;
  --color-brunette-700: #66443e;
  --color-brunette-800: #4f3530;
  --color-brunette-900: #3e2824;
  --color-brunette-950: #271815;
  --color-ethereal-espresso: #382825;
  --color-ethereal-espresso-50: #fef2f0;
  --color-ethereal-espresso-100: #f5e8e5;
  --color-ethereal-espresso-200: #e3d3d0;
  --color-ethereal-espresso-300: #cebcb9;
  --color-ethereal-espresso-400: #af9b97;
  --color-ethereal-espresso-500: #927e7b;
  --color-ethereal-espresso-600: #766360;
  --color-ethereal-espresso-700: #5d4c49;
  --color-ethereal-espresso-800: #473936;
  --color-ethereal-espresso-900: #382825;
  --color-ethereal-espresso-950: #201817;
}

Similar palettes