Start generating

Easter Egg to Storm Is Coming color palette

8B98CAEaster Egg5C638DWizard’s PotionE2EAFFFreeze Up667CBCFloodB4BCE0Stardust Evening333E64Storm Is Coming
Open in generator Export PNG, PDF, ASE…

About this palette

Easter Egg to Storm Is Coming is a 6-color cool, monochromatic palette: #8B98CA (Easter Egg), #5C638D (Wizard’s Potion), #E2EAFF (Freeze Up), #667CBC (Flood), #B4BCE0 (Stardust Evening), #333E64 (Storm Is Coming). It mixes blue, purple, white tones and feels cool overall. The strongest text pairing is #E2EAFF on #333E64 with a contrast ratio of 8.66:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Easter Eggrgb(139, 152, 202)hsl(228, 37%, 67%)
Wizard’s Potionrgb(92, 99, 141)hsl(231, 21%, 46%)
Freeze Uprgb(226, 234, 255)hsl(223, 100%, 94%)
Floodrgb(102, 124, 188)hsl(225, 39%, 57%)
Stardust Eveningrgb(180, 188, 224)hsl(229, 42%, 79%)
Storm Is Comingrgb(51, 62, 100)hsl(227, 32%, 30%)

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.66:1 Very good#E2EAFF on #333E64
  • Aa8.66:1 Very good#333E64 on #E2EAFF
  • Aa5.57:1 Good#B4BCE0 on #333E64
  • Aa5.57:1 Good#333E64 on #B4BCE0
  • Aa4.81:1 Good#5C638D on #E2EAFF
  • Aa4.81:1 Good#E2EAFF on #5C638D
  • Aa3.70:1 Poor#8B98CA on #333E64
  • Aa3.70:1 Poor#333E64 on #8B98CA

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Easter Egg to Storm Is Coming — https://swatchly.xyz/palette/8b98ca-5c638d-e2eaff-667cbc-b4bce0-333e64 */
:root {
  --easter-egg: #8b98ca;
  --wizard-s-potion: #5c638d;
  --freeze-up: #e2eaff;
  --flood: #667cbc;
  --stardust-evening: #b4bce0;
  --storm-is-coming: #333e64;
}

Tailwind CSS v4

/* Easter Egg to Storm Is Coming — https://swatchly.xyz/palette/8b98ca-5c638d-e2eaff-667cbc-b4bce0-333e64 */
@theme {
  --color-easter-egg: #8b98ca;
  --color-easter-egg-50: #eef2ff;
  --color-easter-egg-100: #e0e7ff;
  --color-easter-egg-200: #c6d1fa;
  --color-easter-egg-300: #adb9e6;
  --color-easter-egg-400: #8b98ca;
  --color-easter-egg-500: #727eae;
  --color-easter-egg-600: #596592;
  --color-easter-egg-700: #464f78;
  --color-easter-egg-800: #353e62;
  --color-easter-egg-900: #29304e;
  --color-easter-egg-950: #191e34;
  --color-wizard-s-potion: #5c638d;
  --color-wizard-s-potion-50: #f2f5ff;
  --color-wizard-s-potion-100: #e4e9ff;
  --color-wizard-s-potion-200: #ccd3f7;
  --color-wizard-s-potion-300: #b3bbe4;
  --color-wizard-s-potion-400: #929bc6;
  --color-wizard-s-potion-500: #777eaa;
  --color-wizard-s-potion-600: #5c638d;
  --color-wizard-s-potion-700: #484e73;
  --color-wizard-s-potion-800: #373c5c;
  --color-wizard-s-potion-900: #2a2e49;
  --color-wizard-s-potion-950: #191c2f;
  --color-freeze-up: #e2eaff;
  --color-freeze-up-50: #f0f4ff;
  --color-freeze-up-100: #e2eaff;
  --color-freeze-up-200: #d1d7e6;
  --color-freeze-up-300: #b9c0d1;
  --color-freeze-up-400: #9aa1b4;
  --color-freeze-up-500: #7e8698;
  --color-freeze-up-600: #656b7d;
  --color-freeze-up-700: #4f5565;
  --color-freeze-up-800: #3d4250;
  --color-freeze-up-900: #2e333e;
  --color-freeze-up-950: #1c1f28;
  --color-flood: #667cbc;
  --color-flood-50: #eff4ff;
  --color-flood-100: #dfe8ff;
  --color-flood-200: #c2d3ff;
  --color-flood-300: #a4baf6;
  --color-flood-400: #8299d9;
  --color-flood-500: #667cbc;
  --color-flood-600: #4f639f;
  --color-flood-700: #3c4e84;
  --color-flood-800: #2d3c6b;
  --color-flood-900: #212e56;
  --color-flood-950: #131c39;
  --color-stardust-evening: #b4bce0;
  --color-stardust-evening-50: #f0f3ff;
  --color-stardust-evening-100: #e3e8ff;
  --color-stardust-evening-200: #cdd4ef;
  --color-stardust-evening-300: #b4bce0;
  --color-stardust-evening-400: #969dbf;
  --color-stardust-evening-500: #7b82a4;
  --color-stardust-evening-600: #626888;
  --color-stardust-evening-700: #4d526f;
  --color-stardust-evening-800: #3b4059;
  --color-stardust-evening-900: #2d3146;
  --color-stardust-evening-950: #1b1e2d;
  --color-storm-is-coming: #333e64;
  --color-storm-is-coming-50: #f1f5ff;
  --color-storm-is-coming-100: #e4ebff;
  --color-storm-is-coming-200: #cbd7f9;
  --color-storm-is-coming-300: #b2bfe7;
  --color-storm-is-coming-400: #919fca;
  --color-storm-is-coming-500: #7683ae;
  --color-storm-is-coming-600: #5c6991;
  --color-storm-is-coming-700: #475276;
  --color-storm-is-coming-800: #333e64;
  --color-storm-is-coming-900: #28304a;
  --color-storm-is-coming-950: #171d30;
}

Similar palettes