Hanami Pink to Cashmere Clay color palette

EFADD8Hanami Pink 6C4530Pumpernickel 5AAB93Hole in One 431C3ABlackberry 1A788CCelestial C89E88Cashmere Clay

Open in generator Export PNG, PDF, ASE…

About this palette

Hanami Pink to Cashmere Clay is a 6-color warm, vintage palette: #EFADD8 (Hanami Pink), #6C4530 (Pumpernickel), #5AAB93 (Hole in One), #431C3A (Blackberry), #1A788C (Celestial), #C89E88 (Cashmere Clay). It mixes pink, brown, turquoise, purple, blue, orange tones and feels warm overall. The strongest text pairing is #EFADD8 on #431C3A with a contrast ratio of 7.94:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Hanami Pink	rgb(239, 173, 216)	hsl(321, 67%, 81%)
Pumpernickel	rgb(108, 69, 48)	hsl(21, 38%, 31%)
Hole in One	rgb(90, 171, 147)	hsl(162, 33%, 51%)
Blackberry	rgb(67, 28, 58)	hsl(314, 41%, 19%)
Celestial	rgb(26, 120, 140)	hsl(191, 69%, 33%)
Cashmere Clay	rgb(200, 158, 136)	hsl(21, 37%, 66%)

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.94:1 Very good#EFADD8 on #431C3A
Aa7.94:1 Very good#431C3A on #EFADD8
Aa5.94:1 Good#431C3A on #C89E88
Aa5.94:1 Good#C89E88 on #431C3A
Aa5.24:1 Good#5AAB93 on #431C3A
Aa5.24:1 Good#431C3A on #5AAB93
Aa4.60:1 Good#EFADD8 on #6C4530
Aa4.60:1 Good#6C4530 on #EFADD8

Color blindness preview

CSS variables

/* Hanami Pink to Cashmere Clay — https://swatchly.xyz/palette/efadd8-6c4530-5aab93-431c3a-1a788c-c89e88 */
:root {
  --hanami-pink: #efadd8;
  --pumpernickel: #6c4530;
  --hole-in-one: #5aab93;
  --blackberry: #431c3a;
  --celestial: #1a788c;
  --cashmere-clay: #c89e88;
}

Tailwind CSS v4

/* Hanami Pink to Cashmere Clay — https://swatchly.xyz/palette/efadd8-6c4530-5aab93-431c3a-1a788c-c89e88 */
@theme {
  --color-hanami-pink: #efadd8;
  --color-hanami-pink-50: #fff3fa;
  --color-hanami-pink-100: #ffe5f5;
  --color-hanami-pink-200: #fbcae9;
  --color-hanami-pink-300: #efadd8;
  --color-hanami-pink-400: #cb8eb6;
  --color-hanami-pink-500: #af729a;
  --color-hanami-pink-600: #91577e;
  --color-hanami-pink-700: #764266;
  --color-hanami-pink-800: #5e3150;
  --color-hanami-pink-900: #4a233e;
  --color-hanami-pink-950: #301427;
  --color-pumpernickel: #6c4530;
  --color-pumpernickel-50: #fff2ec;
  --color-pumpernickel-100: #ffe5d8;
  --color-pumpernickel-200: #f1cebc;
  --color-pumpernickel-300: #ddb5a1;
  --color-pumpernickel-400: #bf947d;
  --color-pumpernickel-500: #a27761;
  --color-pumpernickel-600: #845c47;
  --color-pumpernickel-700: #6c4530;
  --color-pumpernickel-800: #543625;
  --color-pumpernickel-900: #42281b;
  --color-pumpernickel-950: #2a180e;
  --color-hole-in-one: #5aab93;
  --color-hole-in-one-50: #d1feee;
  --color-hole-in-one-100: #c1f4e2;
  --color-hole-in-one-200: #a4e1cd;
  --color-hole-in-one-300: #84cab4;
  --color-hole-in-one-400: #5aab93;
  --color-hole-in-one-500: #3e9079;
  --color-hole-in-one-600: #237661;
  --color-hole-in-one-700: #0d604d;
  --color-hole-in-one-800: #004c3c;
  --color-hole-in-one-900: #003b2e;
  --color-hole-in-one-950: #00261d;
  --color-blackberry: #431c3a;
  --color-blackberry-50: #fff0fa;
  --color-blackberry-100: #ffe1f6;
  --color-blackberry-200: #f0cae5;
  --color-blackberry-300: #ddb2d0;
  --color-blackberry-400: #be8fb1;
  --color-blackberry-500: #a17394;
  --color-blackberry-600: #835878;
  --color-blackberry-700: #68425e;
  --color-blackberry-800: #513048;
  --color-blackberry-900: #431c3a;
  --color-blackberry-950: #261321;
  --color-celestial: #1a788c;
  --color-celestial-50: #e5f9ff;
  --color-celestial-100: #caf4ff;
  --color-celestial-200: #a7e3f3;
  --color-celestial-300: #88cee0;
  --color-celestial-400: #5fafc3;
  --color-celestial-500: #3d93a8;
  --color-celestial-600: #1a788c;
  --color-celestial-700: #006072;
  --color-celestial-800: #004b59;
  --color-celestial-900: #003a45;
  --color-celestial-950: #00242c;
  --color-cashmere-clay: #c89e88;
  --color-cashmere-clay-50: #fff5f0;
  --color-cashmere-clay-100: #ffeadf;
  --color-cashmere-clay-200: #f5d5c4;
  --color-cashmere-clay-300: #e2beac;
  --color-cashmere-clay-400: #c89e88;
  --color-cashmere-clay-500: #aa826c;
  --color-cashmere-clay-600: #8d6652;
  --color-cashmere-clay-700: #724f3d;
  --color-cashmere-clay-800: #5a3c2c;
  --color-cashmere-clay-900: #462d1f;
  --color-cashmere-clay-950: #2c1a11;
}