Espresso to Walkie Chalkie color palette

54342DEspresso 517259Cactus B26FA7Je t’aime 69ABBFBlue Eye Samurai E1B5ABProsciutto FFF5FBWalkie Chalkie

Open in generator Export PNG, PDF, ASE…

About this palette

Espresso to Walkie Chalkie is a 6-color muted, vintage palette: #54342D (Espresso), #517259 (Cactus), #B26FA7 (Je t’aime), #69ABBF (Blue Eye Samurai), #E1B5AB (Prosciutto), #FFF5FB (Walkie Chalkie). It mixes brown, green, pink, blue, white tones and feels warm overall. The strongest text pairing is #54342D on #FFF5FB with a contrast ratio of 10.34:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Espresso	rgb(84, 52, 45)	hsl(11, 30%, 25%)
Cactus	rgb(81, 114, 89)	hsl(135, 17%, 38%)
Je t’aime	rgb(178, 111, 167)	hsl(310, 30%, 57%)
Blue Eye Samurai	rgb(105, 171, 191)	hsl(194, 40%, 58%)
Prosciutto	rgb(225, 181, 171)	hsl(11, 47%, 78%)
Walkie Chalkie	rgb(255, 245, 251)	hsl(324, 100%, 98%)

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.34:1 Very good#54342D on #FFF5FB
Aa10.34:1 Very good#FFF5FB on #54342D
Aa5.98:1 Good#54342D on #E1B5AB
Aa5.98:1 Good#E1B5AB on #54342D
Aa5.05:1 Good#517259 on #FFF5FB
Aa5.05:1 Good#FFF5FB on #517259
Aa4.29:1 Poor#54342D on #69ABBF
Aa4.29:1 Poor#69ABBF on #54342D

Color blindness preview

CSS variables

/* Espresso to Walkie Chalkie — https://swatchly.xyz/palette/54342d-517259-b26fa7-69abbf-e1b5ab-fff5fb */
:root {
  --espresso: #54342d;
  --cactus: #517259;
  --je-t-aime: #b26fa7;
  --blue-eye-samurai: #69abbf;
  --prosciutto: #e1b5ab;
  --walkie-chalkie: #fff5fb;
}

Tailwind CSS v4

/* Espresso to Walkie Chalkie — https://swatchly.xyz/palette/54342d-517259-b26fa7-69abbf-e1b5ab-fff5fb */
@theme {
  --color-espresso: #54342d;
  --color-espresso-50: #fff2ef;
  --color-espresso-100: #ffe5df;
  --color-espresso-200: #eed0c9;
  --color-espresso-300: #d9b7af;
  --color-espresso-400: #bb968d;
  --color-espresso-500: #9e7971;
  --color-espresso-600: #815f57;
  --color-espresso-700: #674842;
  --color-espresso-800: #54342d;
  --color-espresso-900: #3f2924;
  --color-espresso-950: #271814;
  --color-cactus: #517259;
  --color-cactus-50: #e7fbeb;
  --color-cactus-100: #dbf2df;
  --color-cactus-200: #c3dfc9;
  --color-cactus-300: #aac8b0;
  --color-cactus-400: #88a98f;
  --color-cactus-500: #6b8d73;
  --color-cactus-600: #517259;
  --color-cactus-700: #3e5b45;
  --color-cactus-800: #2e4734;
  --color-cactus-900: #223727;
  --color-cactus-950: #132317;
  --color-je-t-aime: #b26fa7;
  --color-je-t-aime-50: #fff1fc;
  --color-je-t-aime-100: #ffe2f9;
  --color-je-t-aime-200: #fbc6f1;
  --color-je-t-aime-300: #e9adde;
  --color-je-t-aime-400: #cd8bc2;
  --color-je-t-aime-500: #b26fa7;
  --color-je-t-aime-600: #94548a;
  --color-je-t-aime-700: #793f70;
  --color-je-t-aime-800: #612e5a;
  --color-je-t-aime-900: #4c2146;
  --color-je-t-aime-950: #31122d;
  --color-blue-eye-samurai: #69abbf;
  --color-blue-eye-samurai-50: #e5f9ff;
  --color-blue-eye-samurai-100: #caf2ff;
  --color-blue-eye-samurai-200: #afe0ef;
  --color-blue-eye-samurai-300: #91cadb;
  --color-blue-eye-samurai-400: #69abbf;
  --color-blue-eye-samurai-500: #4e8fa3;
  --color-blue-eye-samurai-600: #337587;
  --color-blue-eye-samurai-700: #1f5d6e;
  --color-blue-eye-samurai-800: #104958;
  --color-blue-eye-samurai-900: #063945;
  --color-blue-eye-samurai-950: #02242d;
  --color-prosciutto: #e1b5ab;
  --color-prosciutto-50: #fff2ef;
  --color-prosciutto-100: #ffe4de;
  --color-prosciutto-200: #f0cfc7;
  --color-prosciutto-300: #e1b5ab;
  --color-prosciutto-400: #bf968d;
  --color-prosciutto-500: #a47b72;
  --color-prosciutto-600: #876158;
  --color-prosciutto-700: #6e4b44;
  --color-prosciutto-800: #583a33;
  --color-prosciutto-900: #452b26;
  --color-prosciutto-950: #2c1a16;
  --color-walkie-chalkie: #fff5fb;
  --color-walkie-chalkie-50: #fff5fb;
  --color-walkie-chalkie-100: #f2ecef;
  --color-walkie-chalkie-200: #ded7db;
  --color-walkie-chalkie-300: #c8c0c5;
  --color-walkie-chalkie-400: #a89fa5;
  --color-walkie-chalkie-500: #8d8489;
  --color-walkie-chalkie-600: #71696e;
  --color-walkie-chalkie-700: #5a5357;
  --color-walkie-chalkie-800: #474044;
  --color-walkie-chalkie-900: #363134;
  --color-walkie-chalkie-950: #221e20;
}