Easter Egg to Imperial Purple Color Palette

About this palette

Easter Egg to Imperial Purple is a 4-color cool palette: #9694C0 (Easter Egg), #A5617D (Cinnapink), #E7E5FF (Holographic Lavender), #58305E (Imperial Purple). It mixes purple, red tones and feels cool overall. The strongest text pairing is #E7E5FF on #58305E with a contrast ratio of 8.53:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Easter Egg	rgb(150, 148, 192)	hsl(243, 26%, 67%)
Cinnapink	rgb(165, 97, 125)	hsl(335, 27%, 51%)
Holographic Lavender	rgb(231, 229, 255)	hsl(245, 100%, 95%)
Imperial Purple	rgb(88, 48, 94)	hsl(292, 32%, 28%)

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.

Aa8.53:1 Very good#E7E5FF on #58305E
Aa8.53:1 Very good#58305E on #E7E5FF
Aa3.70:1 Poor#A5617D on #E7E5FF
Aa3.70:1 Poor#E7E5FF on #A5617D
Aa3.65:1 Poor#9694C0 on #58305E
Aa3.65:1 Poor#58305E on #9694C0

Color blindness preview

CSS variables

/* Easter Egg to Imperial Purple — https://swatchly.xyz/palette/9694c0-a5617d-e7e5ff-58305e */
:root {
  --easter-egg: #9694c0;
  --cinnapink: #a5617d;
  --holographic-lavender: #e7e5ff;
  --imperial-purple: #58305e;
}

Tailwind CSS v4

/* Easter Egg to Imperial Purple — https://swatchly.xyz/palette/9694c0-a5617d-e7e5ff-58305e */
@theme {
  --color-easter-egg: #9694c0;
  --color-easter-egg-50: #f1f1ff;
  --color-easter-egg-100: #e4e4ff;
  --color-easter-egg-200: #cfcef2;
  --color-easter-egg-300: #b7b5dd;
  --color-easter-egg-400: #9694c0;
  --color-easter-egg-500: #7c7aa5;
  --color-easter-egg-600: #646289;
  --color-easter-egg-700: #4f4d71;
  --color-easter-egg-800: #3e3c5b;
  --color-easter-egg-900: #302e49;
  --color-easter-egg-950: #1e1c30;
  --color-cinnapink: #a5617d;
  --color-cinnapink-50: #ffedf4;
  --color-cinnapink-100: #ffdbe8;
  --color-cinnapink-200: #f8bdd4;
  --color-cinnapink-300: #e4a2bb;
  --color-cinnapink-400: #c47e9a;
  --color-cinnapink-500: #a5617d;
  --color-cinnapink-600: #894a65;
  --color-cinnapink-700: #703850;
  --color-cinnapink-800: #5b2a3f;
  --color-cinnapink-900: #491f31;
  --color-cinnapink-950: #30121f;
  --color-holographic-lavender: #e7e5ff;
  --color-holographic-lavender-50: #f2f1ff;
  --color-holographic-lavender-100: #e7e5ff;
  --color-holographic-lavender-200: #d4d3e6;
  --color-holographic-lavender-300: #bebcd2;
  --color-holographic-lavender-400: #9f9db4;
  --color-holographic-lavender-500: #84829a;
  --color-holographic-lavender-600: #6a687f;
  --color-holographic-lavender-700: #545367;
  --color-holographic-lavender-800: #424051;
  --color-holographic-lavender-900: #32313f;
  --color-holographic-lavender-950: #1f1e28;
  --color-imperial-purple: #58305e;
  --color-imperial-purple-50: #fdf0ff;
  --color-imperial-purple-100: #fbe1ff;
  --color-imperial-purple-200: #edcaf2;
  --color-imperial-purple-300: #d9b1df;
  --color-imperial-purple-400: #bb90c1;
  --color-imperial-purple-500: #a074a6;
  --color-imperial-purple-600: #845a8a;
  --color-imperial-purple-700: #6b4570;
  --color-imperial-purple-800: #58305e;
  --color-imperial-purple-900: #422646;
  --color-imperial-purple-950: #2a162d;
}