Start generating

Love Fumes to Bruised Plum color palette

FED2D4Love FumesAFD084Gossip579ECDSub-Zero577406Topiary Green075A83Whale’s Tale36171EBruised Plum
Open in generator Export PNG, PDF, ASE…

About this palette

Love Fumes to Bruised Plum is a 6-color cool palette: #FED2D4 (Love Fumes), #AFD084 (Gossip), #579ECD (Sub-Zero), #577406 (Topiary Green), #075A83 (Whale’s Tale), #36171E (Bruised Plum). It mixes pink, green, blue, red tones and feels cool overall. The strongest text pairing is #FED2D4 on #36171E with a contrast ratio of 11.85:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Love Fumesrgb(254, 210, 212)hsl(357, 96%, 91%)
Gossiprgb(175, 208, 132)hsl(86, 45%, 67%)
Sub-Zerorgb(87, 158, 205)hsl(204, 54%, 57%)
Topiary Greenrgb(87, 116, 6)hsl(76, 90%, 24%)
Whale’s Talergb(7, 90, 131)hsl(200, 90%, 27%)
Bruised Plumrgb(54, 23, 30)hsl(346, 40%, 15%)

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.

  • Aa11.85:1 Very good#FED2D4 on #36171E
  • Aa11.85:1 Very good#36171E on #FED2D4
  • Aa9.38:1 Very good#AFD084 on #36171E
  • Aa9.38:1 Very good#36171E on #AFD084
  • Aa5.53:1 Good#579ECD on #36171E
  • Aa5.53:1 Good#36171E on #579ECD
  • Aa5.50:1 Good#FED2D4 on #075A83
  • Aa5.50:1 Good#075A83 on #FED2D4

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Love Fumes to Bruised Plum — https://swatchly.xyz/palette/fed2d4-afd084-579ecd-577406-075a83-36171e */
:root {
  --love-fumes: #fed2d4;
  --gossip: #afd084;
  --sub-zero: #579ecd;
  --topiary-green: #577406;
  --whale-s-tale: #075a83;
  --bruised-plum: #36171e;
}

Tailwind CSS v4

/* Love Fumes to Bruised Plum — https://swatchly.xyz/palette/fed2d4-afd084-579ecd-577406-075a83-36171e */
@theme {
  --color-love-fumes: #fed2d4;
  --color-love-fumes-50: #fff8f8;
  --color-love-fumes-100: #ffeced;
  --color-love-fumes-200: #fed2d4;
  --color-love-fumes-300: #e0bdbe;
  --color-love-fumes-400: #c29b9c;
  --color-love-fumes-500: #a57e80;
  --color-love-fumes-600: #886365;
  --color-love-fumes-700: #6e4c4e;
  --color-love-fumes-800: #56393b;
  --color-love-fumes-900: #442b2d;
  --color-love-fumes-950: #2b1a1b;
  --color-gossip: #afd084;
  --color-gossip-50: #ebfed5;
  --color-gossip-100: #e0f5c7;
  --color-gossip-200: #cae3ac;
  --color-gossip-300: #afd084;
  --color-gossip-400: #91af68;
  --color-gossip-500: #75934a;
  --color-gossip-600: #5b782f;
  --color-gossip-700: #46601b;
  --color-gossip-800: #354b0d;
  --color-gossip-900: #273a04;
  --color-gossip-950: #172401;
  --color-sub-zero: #579ecd;
  --color-sub-zero-50: #e4f3ff;
  --color-sub-zero-100: #cceaff;
  --color-sub-zero-200: #a0d7fe;
  --color-sub-zero-300: #80bfea;
  --color-sub-zero-400: #579ecd;
  --color-sub-zero-500: #3d84b2;
  --color-sub-zero-600: #246b96;
  --color-sub-zero-700: #10567c;
  --color-sub-zero-800: #024465;
  --color-sub-zero-900: #003551;
  --color-sub-zero-950: #002236;
  --color-topiary-green: #577406;
  --color-topiary-green-50: #eafecb;
  --color-topiary-green-100: #def5ba;
  --color-topiary-green-200: #c7e29c;
  --color-topiary-green-300: #aecc7b;
  --color-topiary-green-400: #8dac52;
  --color-topiary-green-500: #719030;
  --color-topiary-green-600: #577406;
  --color-topiary-green-700: #445c00;
  --color-topiary-green-800: #354800;
  --color-topiary-green-900: #283800;
  --color-topiary-green-950: #182300;
  --color-whale-s-tale: #075a83;
  --color-whale-s-tale-50: #ecf7ff;
  --color-whale-s-tale-100: #d8efff;
  --color-whale-s-tale-200: #afdeff;
  --color-whale-s-tale-300: #8dc8f0;
  --color-whale-s-tale-400: #66a9d4;
  --color-whale-s-tale-500: #478db9;
  --color-whale-s-tale-600: #2c729b;
  --color-whale-s-tale-700: #075a83;
  --color-whale-s-tale-800: #064667;
  --color-whale-s-tale-900: #003652;
  --color-whale-s-tale-950: #002135;
  --color-bruised-plum: #36171e;
  --color-bruised-plum-50: #fff1f3;
  --color-bruised-plum-100: #ffe3e7;
  --color-bruised-plum-200: #eeced3;
  --color-bruised-plum-300: #dbb6bc;
  --color-bruised-plum-400: #bd969c;
  --color-bruised-plum-500: #a27b81;
  --color-bruised-plum-600: #876168;
  --color-bruised-plum-700: #6e4c52;
  --color-bruised-plum-800: #593b41;
  --color-bruised-plum-900: #472d32;
  --color-bruised-plum-950: #36171e;
}

Similar palettes