Start generating

Digital Lavender to Angry Ghost color palette

C4C1E6Digital LavenderEDD1FBBubblegum CrisisEDDD9CHazy MoonEAF4FFSilent SnowfallECBAB6Angry Ghost
Open in generator Export PNG, PDF, ASE…

About this palette

Digital Lavender to Angry Ghost is a 5-color pastel, light palette: #C4C1E6 (Digital Lavender), #EDD1FB (Bubblegum Crisis), #EDDD9C (Hazy Moon), #EAF4FF (Silent Snowfall), #ECBAB6 (Angry Ghost). It mixes purple, yellow, white, pink tones and feels balanced overall. The strongest text pairing is #C4C1E6 on #EAF4FF with a contrast ratio of 1.56:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Digital Lavenderrgb(196, 193, 230)hsl(245, 43%, 83%)
Bubblegum Crisisrgb(237, 209, 251)hsl(280, 84%, 90%)
Hazy Moonrgb(237, 221, 156)hsl(48, 69%, 77%)
Silent Snowfallrgb(234, 244, 255)hsl(211, 100%, 96%)
Angry Ghostrgb(236, 186, 182)hsl(4, 59%, 82%)

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.

    Color blindness preview

    • Protanopia
    • Deuteranopia
    • Tritanopia
    • Achromatopsia
    • Dog vision

    CSS variables

    /* Digital Lavender to Angry Ghost — https://swatchly.xyz/palette/c4c1e6-edd1fb-eddd9c-eaf4ff-ecbab6 */
:root {
  --digital-lavender: #c4c1e6;
  --bubblegum-crisis: #edd1fb;
  --hazy-moon: #eddd9c;
  --silent-snowfall: #eaf4ff;
  --angry-ghost: #ecbab6;
}

    Tailwind CSS v4

    /* Digital Lavender to Angry Ghost — https://swatchly.xyz/palette/c4c1e6-edd1fb-eddd9c-eaf4ff-ecbab6 */
@theme {
  --color-digital-lavender: #c4c1e6;
  --color-digital-lavender-50: #f7f7ff;
  --color-digital-lavender-100: #edecff;
  --color-digital-lavender-200: #dad8f3;
  --color-digital-lavender-300: #c4c1e6;
  --color-digital-lavender-400: #a4a1c3;
  --color-digital-lavender-500: #8885a7;
  --color-digital-lavender-600: #6d698a;
  --color-digital-lavender-700: #555270;
  --color-digital-lavender-800: #423f59;
  --color-digital-lavender-900: #323045;
  --color-digital-lavender-950: #1f1d2c;
  --color-bubblegum-crisis: #edd1fb;
  --color-bubblegum-crisis-50: #fcf6ff;
  --color-bubblegum-crisis-100: #f8eaff;
  --color-bubblegum-crisis-200: #edd1fb;
  --color-bubblegum-crisis-300: #d2bcde;
  --color-bubblegum-crisis-400: #b39ac0;
  --color-bubblegum-crisis-500: #977da4;
  --color-bubblegum-crisis-600: #7b6387;
  --color-bubblegum-crisis-700: #624c6d;
  --color-bubblegum-crisis-800: #4d3a56;
  --color-bubblegum-crisis-900: #3c2b44;
  --color-bubblegum-crisis-950: #261a2b;
  --color-hazy-moon: #eddd9c;
  --color-hazy-moon-50: #fff9e0;
  --color-hazy-moon-100: #f9f0ca;
  --color-hazy-moon-200: #eddd9c;
  --color-hazy-moon-300: #d2c591;
  --color-hazy-moon-400: #b4a569;
  --color-hazy-moon-500: #98884a;
  --color-hazy-moon-600: #7c6d2f;
  --color-hazy-moon-700: #63551b;
  --color-hazy-moon-800: #4e420c;
  --color-hazy-moon-900: #3c3204;
  --color-hazy-moon-950: #261f01;
  --color-silent-snowfall: #eaf4ff;
  --color-silent-snowfall-50: #eaf4ff;
  --color-silent-snowfall-100: #e4eaf1;
  --color-silent-snowfall-200: #cfd7df;
  --color-silent-snowfall-300: #b9c1ca;
  --color-silent-snowfall-400: #99a2ac;
  --color-silent-snowfall-500: #7e8791;
  --color-silent-snowfall-600: #646d76;
  --color-silent-snowfall-700: #4e565f;
  --color-silent-snowfall-800: #3c434a;
  --color-silent-snowfall-900: #2e333a;
  --color-silent-snowfall-950: #1c2024;
  --color-angry-ghost: #ecbab6;
  --color-angry-ghost-50: #fff7f6;
  --color-angry-ghost-100: #ffebe9;
  --color-angry-ghost-200: #f8d4d1;
  --color-angry-ghost-300: #ecbab6;
  --color-angry-ghost-400: #c89a97;
  --color-angry-ghost-500: #ab7d7a;
  --color-angry-ghost-600: #8e625f;
  --color-angry-ghost-700: #734b49;
  --color-angry-ghost-800: #5b3937;
  --color-angry-ghost-900: #472a28;
  --color-angry-ghost-950: #2d1918;
}

    Similar palettes