Start generating

Purple Illusion to Cloud Break color palette

BEB7F2Purple Illusion3F532DZen Garden Olive59A134Radiant Foliage973C8APurple ExcellencyF3F1FFCloud Break
Open in generator Export PNG, PDF, ASE…

About this palette

Purple Illusion to Cloud Break is a 5-color cool palette: #BEB7F2 (Purple Illusion), #3F532D (Zen Garden Olive), #59A134 (Radiant Foliage), #973C8A (Purple Excellency), #F3F1FF (Cloud Break). It mixes purple, green, pink, white tones and feels cool overall. The strongest text pairing is #3F532D on #F3F1FF with a contrast ratio of 7.58:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Purple Illusionrgb(190, 183, 242)hsl(247, 69%, 83%)
Zen Garden Olivergb(63, 83, 45)hsl(92, 30%, 25%)
Radiant Foliagergb(89, 161, 52)hsl(100, 51%, 42%)
Purple Excellencyrgb(151, 60, 138)hsl(309, 43%, 41%)
Cloud Breakrgb(243, 241, 255)hsl(249, 100%, 97%)

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.

  • Aa7.58:1 Very good#3F532D on #F3F1FF
  • Aa7.58:1 Very good#F3F1FF on #3F532D
  • Aa5.66:1 Good#973C8A on #F3F1FF
  • Aa5.66:1 Good#F3F1FF on #973C8A
  • Aa4.52:1 Good#BEB7F2 on #3F532D
  • Aa4.52:1 Good#3F532D on #BEB7F2
  • Aa3.38:1 Poor#BEB7F2 on #973C8A
  • Aa3.38:1 Poor#973C8A on #BEB7F2

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Purple Illusion to Cloud Break — https://swatchly.xyz/palette/beb7f2-3f532d-59a134-973c8a-f3f1ff */
:root {
  --purple-illusion: #beb7f2;
  --zen-garden-olive: #3f532d;
  --radiant-foliage: #59a134;
  --purple-excellency: #973c8a;
  --cloud-break: #f3f1ff;
}

Tailwind CSS v4

/* Purple Illusion to Cloud Break — https://swatchly.xyz/palette/beb7f2-3f532d-59a134-973c8a-f3f1ff */
@theme {
  --color-purple-illusion: #beb7f2;
  --color-purple-illusion-50: #f4f3ff;
  --color-purple-illusion-100: #e9e7ff;
  --color-purple-illusion-200: #d5d0fd;
  --color-purple-illusion-300: #beb7f2;
  --color-purple-illusion-400: #9f98cf;
  --color-purple-illusion-500: #847db4;
  --color-purple-illusion-600: #6a6397;
  --color-purple-illusion-700: #544d7c;
  --color-purple-illusion-800: #423b65;
  --color-purple-illusion-900: #322d50;
  --color-purple-illusion-950: #1f1b34;
  --color-zen-garden-olive: #3f532d;
  --color-zen-garden-olive-50: #edfbe2;
  --color-zen-garden-olive-100: #e2f1d6;
  --color-zen-garden-olive-200: #caddbc;
  --color-zen-garden-olive-300: #b0c5a0;
  --color-zen-garden-olive-400: #8ea57c;
  --color-zen-garden-olive-500: #72885f;
  --color-zen-garden-olive-600: #576b45;
  --color-zen-garden-olive-700: #3f532d;
  --color-zen-garden-olive-800: #314024;
  --color-zen-garden-olive-900: #253219;
  --color-zen-garden-olive-950: #151e0d;
  --color-radiant-foliage: #59a134;
  --color-radiant-foliage-50: #e6ffdd;
  --color-radiant-foliage-100: #cffdbd;
  --color-radiant-foliage-200: #b7eda0;
  --color-radiant-foliage-300: #9bd981;
  --color-radiant-foliage-400: #77bc57;
  --color-radiant-foliage-500: #59a134;
  --color-radiant-foliage-600: #3e840e;
  --color-radiant-foliage-700: #2d6900;
  --color-radiant-foliage-800: #225200;
  --color-radiant-foliage-900: #183f00;
  --color-radiant-foliage-950: #0c2700;
  --color-purple-excellency: #973c8a;
  --color-purple-excellency-50: #fff0fc;
  --color-purple-excellency-100: #ffdff8;
  --color-purple-excellency-200: #ffbcf2;
  --color-purple-excellency-300: #f19ce2;
  --color-purple-excellency-400: #d377c4;
  --color-purple-excellency-500: #b658a7;
  --color-purple-excellency-600: #973c8a;
  --color-purple-excellency-700: #7b2b70;
  --color-purple-excellency-800: #631d5a;
  --color-purple-excellency-900: #4f1347;
  --color-purple-excellency-950: #33082e;
  --color-cloud-break: #f3f1ff;
  --color-cloud-break-50: #f3f1ff;
  --color-cloud-break-100: #e9e8f1;
  --color-cloud-break-200: #d6d5df;
  --color-cloud-break-300: #c0beca;
  --color-cloud-break-400: #a19fab;
  --color-cloud-break-500: #868490;
  --color-cloud-break-600: #6c6a76;
  --color-cloud-break-700: #55545e;
  --color-cloud-break-800: #42414a;
  --color-cloud-break-900: #333239;
  --color-cloud-break-950: #1f1e24;
}

Similar palettes