Start generating

Mango Cheesecake to Dark color palette

F7EDDAMango CheesecakeBBB5A0Ashes to Ashes9D92B0Wizard’s Brew547C97Quiet Harbour443C4CItalian Grape152530Dark
Open in generator Export PNG, PDF, ASE…

About this palette

Mango Cheesecake to Dark is a 6-color muted, gradient palette: #F7EDDA (Mango Cheesecake), #BBB5A0 (Ashes to Ashes), #9D92B0 (Wizard’s Brew), #547C97 (Quiet Harbour), #443C4C (Italian Grape), #152530 (Dark). It mixes white, gray, purple, blue tones and feels cool overall. The strongest text pairing is #F7EDDA on #152530 with a contrast ratio of 13.50:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Mango Cheesecakergb(247, 237, 218)hsl(39, 64%, 91%)
Ashes to Ashesrgb(187, 181, 160)hsl(47, 17%, 68%)
Wizard’s Brewrgb(157, 146, 176)hsl(262, 16%, 63%)
Quiet Harbourrgb(84, 124, 151)hsl(204, 29%, 46%)
Italian Grapergb(68, 60, 76)hsl(270, 12%, 27%)
Darkrgb(21, 37, 48)hsl(204, 39%, 14%)

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.

  • Aa13.50:1 Super#F7EDDA on #152530
  • Aa13.50:1 Super#152530 on #F7EDDA
  • Aa9.06:1 Very good#F7EDDA on #443C4C
  • Aa9.06:1 Very good#443C4C on #F7EDDA
  • Aa7.64:1 Very good#BBB5A0 on #152530
  • Aa7.64:1 Very good#152530 on #BBB5A0
  • Aa5.36:1 Good#9D92B0 on #152530
  • Aa5.36:1 Good#152530 on #9D92B0

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Mango Cheesecake to Dark — https://swatchly.xyz/palette/f7edda-bbb5a0-9d92b0-547c97-443c4c-152530 */
:root {
  --mango-cheesecake: #f7edda;
  --ashes-to-ashes: #bbb5a0;
  --wizard-s-brew: #9d92b0;
  --quiet-harbour: #547c97;
  --italian-grape: #443c4c;
  --dark: #152530;
}

Tailwind CSS v4

/* Mango Cheesecake to Dark — https://swatchly.xyz/palette/f7edda-bbb5a0-9d92b0-547c97-443c4c-152530 */
@theme {
  --color-mango-cheesecake: #f7edda;
  --color-mango-cheesecake-50: #fcf7ed;
  --color-mango-cheesecake-100: #f7edda;
  --color-mango-cheesecake-200: #e0d9cc;
  --color-mango-cheesecake-300: #cac2b2;
  --color-mango-cheesecake-400: #aba291;
  --color-mango-cheesecake-500: #8f8675;
  --color-mango-cheesecake-600: #746b5b;
  --color-mango-cheesecake-700: #5c5445;
  --color-mango-cheesecake-800: #484135;
  --color-mango-cheesecake-900: #383227;
  --color-mango-cheesecake-950: #231f17;
  --color-ashes-to-ashes: #bbb5a0;
  --color-ashes-to-ashes-50: #f3efe2;
  --color-ashes-to-ashes-100: #e7e3d4;
  --color-ashes-to-ashes-200: #d2cdbc;
  --color-ashes-to-ashes-300: #bbb5a0;
  --color-ashes-to-ashes-400: #9e9884;
  --color-ashes-to-ashes-500: #847f6b;
  --color-ashes-to-ashes-600: #6c6654;
  --color-ashes-to-ashes-700: #575241;
  --color-ashes-to-ashes-800: #454132;
  --color-ashes-to-ashes-900: #363326;
  --color-ashes-to-ashes-950: #221f16;
  --color-wizard-s-brew: #9d92b0;
  --color-wizard-s-brew-50: #f4eeff;
  --color-wizard-s-brew-100: #e9e2f7;
  --color-wizard-s-brew-200: #d5cce5;
  --color-wizard-s-brew-300: #bdb3cf;
  --color-wizard-s-brew-400: #9d92b0;
  --color-wizard-s-brew-500: #837996;
  --color-wizard-s-brew-600: #6a607b;
  --color-wizard-s-brew-700: #554c64;
  --color-wizard-s-brew-800: #433b50;
  --color-wizard-s-brew-900: #352e40;
  --color-wizard-s-brew-950: #211c2a;
  --color-quiet-harbour: #547c97;
  --color-quiet-harbour-50: #ecf7ff;
  --color-quiet-harbour-100: #dcf1ff;
  --color-quiet-harbour-200: #c2e0f6;
  --color-quiet-harbour-300: #a9cce5;
  --color-quiet-harbour-400: #88afca;
  --color-quiet-harbour-500: #6d95b1;
  --color-quiet-harbour-600: #547c97;
  --color-quiet-harbour-700: #3e637b;
  --color-quiet-harbour-800: #2c4d63;
  --color-quiet-harbour-900: #1f3b4d;
  --color-quiet-harbour-950: #102532;
  --color-italian-grape: #443c4c;
  --color-italian-grape-50: #f8f2fe;
  --color-italian-grape-100: #eee8f5;
  --color-italian-grape-200: #dbd4e3;
  --color-italian-grape-300: #c5bccd;
  --color-italian-grape-400: #a59cae;
  --color-italian-grape-500: #898093;
  --color-italian-grape-600: #6e6677;
  --color-italian-grape-700: #574f5f;
  --color-italian-grape-800: #443c4c;
  --color-italian-grape-900: #342e39;
  --color-italian-grape-950: #201c24;
  --color-dark: #152530;
  --color-dark-50: #ecf7ff;
  --color-dark-100: #e1edf7;
  --color-dark-200: #cbdae5;
  --color-dark-300: #b3c4d0;
  --color-dark-400: #92a4b2;
  --color-dark-500: #778a97;
  --color-dark-600: #5e707d;
  --color-dark-700: #495a66;
  --color-dark-800: #394752;
  --color-dark-900: #2b3841;
  --color-dark-950: #152530;
}

Similar palettes