Start generating

Hanami Pink to Puffy Cloud color palette

F8A4E1Hanami Pink18420DRealm of the UnderworldA49866Veranda Gold684163Royal Plum7179AFFloodD8E2FFPuffy Cloud
Open in generator Export PNG, PDF, ASE…

About this palette

Hanami Pink to Puffy Cloud is a 6-color vintage palette: #F8A4E1 (Hanami Pink), #18420D (Realm of the Underworld), #A49866 (Veranda Gold), #684163 (Royal Plum), #7179AF (Flood), #D8E2FF (Puffy Cloud). It mixes pink, green, yellow, purple, blue tones and feels balanced overall. The strongest text pairing is #18420D on #D8E2FF with a contrast ratio of 8.91:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Hanami Pinkrgb(248, 164, 225)hsl(316, 86%, 81%)
Realm of the Underworldrgb(24, 66, 13)hsl(108, 67%, 15%)
Veranda Goldrgb(164, 152, 102)hsl(48, 25%, 52%)
Royal Plumrgb(104, 65, 99)hsl(308, 23%, 33%)
Floodrgb(113, 121, 175)hsl(232, 28%, 56%)
Puffy Cloudrgb(216, 226, 255)hsl(225, 100%, 92%)

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.

  • Aa8.91:1 Very good#18420D on #D8E2FF
  • Aa8.91:1 Very good#D8E2FF on #18420D
  • Aa6.43:1 Good#684163 on #D8E2FF
  • Aa6.43:1 Good#D8E2FF on #684163
  • Aa6.24:1 Good#F8A4E1 on #18420D
  • Aa6.24:1 Good#18420D on #F8A4E1
  • Aa4.51:1 Good#F8A4E1 on #684163
  • Aa4.51:1 Good#684163 on #F8A4E1

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Hanami Pink to Puffy Cloud — https://swatchly.xyz/palette/f8a4e1-18420d-a49866-684163-7179af-d8e2ff */
:root {
  --hanami-pink: #f8a4e1;
  --realm-of-the-underworld: #18420d;
  --veranda-gold: #a49866;
  --royal-plum: #684163;
  --flood: #7179af;
  --puffy-cloud: #d8e2ff;
}

Tailwind CSS v4

/* Hanami Pink to Puffy Cloud — https://swatchly.xyz/palette/f8a4e1-18420d-a49866-684163-7179af-d8e2ff */
@theme {
  --color-hanami-pink: #f8a4e1;
  --color-hanami-pink-50: #fff3fb;
  --color-hanami-pink-100: #ffe4f7;
  --color-hanami-pink-200: #ffc6ee;
  --color-hanami-pink-300: #f8a4e1;
  --color-hanami-pink-400: #d486bf;
  --color-hanami-pink-500: #b769a3;
  --color-hanami-pink-600: #994e87;
  --color-hanami-pink-700: #7d396d;
  --color-hanami-pink-800: #642957;
  --color-hanami-pink-900: #4f1c43;
  --color-hanami-pink-950: #330f2b;
  --color-realm-of-the-underworld: #18420d;
  --color-realm-of-the-underworld-50: #e4fede;
  --color-realm-of-the-underworld-100: #d8f5d1;
  --color-realm-of-the-underworld-200: #c0e3b8;
  --color-realm-of-the-underworld-300: #a6ce9d;
  --color-realm-of-the-underworld-400: #85b07b;
  --color-realm-of-the-underworld-500: #69965f;
  --color-realm-of-the-underworld-600: #507b47;
  --color-realm-of-the-underworld-700: #3d6434;
  --color-realm-of-the-underworld-800: #2d5025;
  --color-realm-of-the-underworld-900: #18420d;
  --color-realm-of-the-underworld-950: #12290d;
  --color-veranda-gold: #a49866;
  --color-veranda-gold-50: #f9f2d4;
  --color-veranda-gold-100: #eee6c5;
  --color-veranda-gold-200: #dbd1a9;
  --color-veranda-gold-300: #c4b98c;
  --color-veranda-gold-400: #a49866;
  --color-veranda-gold-500: #8a7e4d;
  --color-veranda-gold-600: #716637;
  --color-veranda-gold-700: #5b5126;
  --color-veranda-gold-800: #483f19;
  --color-veranda-gold-900: #393110;
  --color-veranda-gold-950: #251f07;
  --color-royal-plum: #684163;
  --color-royal-plum-50: #fff0fc;
  --color-royal-plum-100: #fee1f9;
  --color-royal-plum-200: #edcae7;
  --color-royal-plum-300: #d8b1d2;
  --color-royal-plum-400: #b98fb3;
  --color-royal-plum-500: #9d7397;
  --color-royal-plum-600: #80587b;
  --color-royal-plum-700: #684163;
  --color-royal-plum-800: #51324d;
  --color-royal-plum-900: #3f263c;
  --color-royal-plum-950: #281626;
  --color-flood: #7179af;
  --color-flood-50: #f0f3ff;
  --color-flood-100: #e2e7ff;
  --color-flood-200: #c8d0fd;
  --color-flood-300: #aeb7ea;
  --color-flood-400: #8d96cc;
  --color-flood-500: #7179af;
  --color-flood-600: #596093;
  --color-flood-700: #464c79;
  --color-flood-800: #363b62;
  --color-flood-900: #292d4e;
  --color-flood-950: #191c34;
  --color-puffy-cloud: #d8e2ff;
  --color-puffy-cloud-50: #e8eeff;
  --color-puffy-cloud-100: #d8e2ff;
  --color-puffy-cloud-200: #c8d0e6;
  --color-puffy-cloud-300: #b2bbd3;
  --color-puffy-cloud-400: #949db7;
  --color-puffy-cloud-500: #7a839d;
  --color-puffy-cloud-600: #616a82;
  --color-puffy-cloud-700: #4d546b;
  --color-puffy-cloud-800: #3b4255;
  --color-puffy-cloud-900: #2d3243;
  --color-puffy-cloud-950: #1b1f2b;
}

Similar palettes