Start generating

Heavy Violet to Puffy Cloud color palette

50566CHeavy VioletE0AE9DSun-Kissed Beach273329Terminal Black7A9A89Parisian Patina8B6D60Mocha MadnessD6E1FFPuffy Cloud
Open in generator Export PNG, PDF, ASE…

About this palette

Heavy Violet to Puffy Cloud is a 6-color muted palette: #50566C (Heavy Violet), #E0AE9D (Sun-Kissed Beach), #273329 (Terminal Black), #7A9A89 (Parisian Patina), #8B6D60 (Mocha Madness), #D6E1FF (Puffy Cloud). It mixes blue, pink, gray, green, brown tones and feels cool overall. The strongest text pairing is #273329 on #D6E1FF with a contrast ratio of 10.10:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Heavy Violetrgb(80, 86, 108)hsl(227, 15%, 37%)
Sun-Kissed Beachrgb(224, 174, 157)hsl(15, 52%, 75%)
Terminal Blackrgb(39, 51, 41)hsl(130, 13%, 18%)
Parisian Patinargb(122, 154, 137)hsl(148, 14%, 54%)
Mocha Madnessrgb(139, 109, 96)hsl(18, 18%, 46%)
Puffy Cloudrgb(214, 225, 255)hsl(224, 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.

  • Aa10.10:1 Very good#273329 on #D6E1FF
  • Aa10.10:1 Very good#D6E1FF on #273329
  • Aa6.73:1 Good#E0AE9D on #273329
  • Aa6.73:1 Good#273329 on #E0AE9D
  • Aa5.56:1 Good#50566C on #D6E1FF
  • Aa5.56:1 Good#D6E1FF on #50566C
  • Aa4.28:1 Poor#273329 on #7A9A89
  • Aa4.28:1 Poor#7A9A89 on #273329

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Heavy Violet to Puffy Cloud — https://swatchly.xyz/palette/50566c-e0ae9d-273329-7a9a89-8b6d60-d6e1ff */
:root {
  --heavy-violet: #50566c;
  --sun-kissed-beach: #e0ae9d;
  --terminal-black: #273329;
  --parisian-patina: #7a9a89;
  --mocha-madness: #8b6d60;
  --puffy-cloud: #d6e1ff;
}

Tailwind CSS v4

/* Heavy Violet to Puffy Cloud — https://swatchly.xyz/palette/50566c-e0ae9d-273329-7a9a89-8b6d60-d6e1ff */
@theme {
  --color-heavy-violet: #50566c;
  --color-heavy-violet-50: #f2f5ff;
  --color-heavy-violet-100: #e6ebfb;
  --color-heavy-violet-200: #d2d7ea;
  --color-heavy-violet-300: #bbc1d6;
  --color-heavy-violet-400: #9ba2b9;
  --color-heavy-violet-500: #80869e;
  --color-heavy-violet-600: #666c83;
  --color-heavy-violet-700: #50566c;
  --color-heavy-violet-800: #3e4355;
  --color-heavy-violet-900: #2f3342;
  --color-heavy-violet-950: #1d1f2a;
  --color-sun-kissed-beach: #e0ae9d;
  --color-sun-kissed-beach-50: #ffeee8;
  --color-sun-kissed-beach-100: #ffdfd5;
  --color-sun-kissed-beach-200: #f0c9bb;
  --color-sun-kissed-beach-300: #e0ae9d;
  --color-sun-kissed-beach-400: #bf9080;
  --color-sun-kissed-beach-500: #a47666;
  --color-sun-kissed-beach-600: #895d4e;
  --color-sun-kissed-beach-700: #70483b;
  --color-sun-kissed-beach-800: #5a382c;
  --color-sun-kissed-beach-900: #472a20;
  --color-sun-kissed-beach-950: #2e1912;
  --color-terminal-black: #273329;
  --color-terminal-black-50: #eff8f0;
  --color-terminal-black-100: #e5eee6;
  --color-terminal-black-200: #d0dbd1;
  --color-terminal-black-300: #b8c5ba;
  --color-terminal-black-400: #97a599;
  --color-terminal-black-500: #7b897d;
  --color-terminal-black-600: #616e63;
  --color-terminal-black-700: #4b564c;
  --color-terminal-black-800: #38433a;
  --color-terminal-black-900: #273329;
  --color-terminal-black-950: #181e19;
  --color-parisian-patina: #7a9a89;
  --color-parisian-patina-50: #eafcf2;
  --color-parisian-patina-100: #e1f5ea;
  --color-parisian-patina-200: #cce4d7;
  --color-parisian-patina-300: #b5d0c2;
  --color-parisian-patina-400: #95b4a3;
  --color-parisian-patina-500: #7a9a89;
  --color-parisian-patina-600: #5e7d6d;
  --color-parisian-patina-700: #476455;
  --color-parisian-patina-800: #354e41;
  --color-parisian-patina-900: #263b31;
  --color-parisian-patina-950: #15251d;
  --color-mocha-madness: #8b6d60;
  --color-mocha-madness-50: #fff2ed;
  --color-mocha-madness-100: #fde8df;
  --color-mocha-madness-200: #eed5ca;
  --color-mocha-madness-300: #dbbfb3;
  --color-mocha-madness-400: #bfa093;
  --color-mocha-madness-500: #a58679;
  --color-mocha-madness-600: #8b6d60;
  --color-mocha-madness-700: #715549;
  --color-mocha-madness-800: #594237;
  --color-mocha-madness-900: #463129;
  --color-mocha-madness-950: #2c1e17;
  --color-puffy-cloud: #d6e1ff;
  --color-puffy-cloud-50: #e6edff;
  --color-puffy-cloud-100: #d6e1ff;
  --color-puffy-cloud-200: #c7cfe6;
  --color-puffy-cloud-300: #b1bad4;
  --color-puffy-cloud-400: #939cb8;
  --color-puffy-cloud-500: #79839e;
  --color-puffy-cloud-600: #616a83;
  --color-puffy-cloud-700: #4c556c;
  --color-puffy-cloud-800: #3b4256;
  --color-puffy-cloud-900: #2c3243;
  --color-puffy-cloud-950: #1b1f2b;
}

Similar palettes