Start generating

Purple Illusion to Silent Orbit color palette

B8B3FFPurple Illusion9C90E0Perrywinkle7C7BBCOrbital5858B1Ultrapurple Merge483D77Meteorite211F4ESilent Orbit
Open in generator Export PNG, PDF, ASE…

About this palette

Purple Illusion to Silent Orbit is a 6-color cool, monochromatic, gradient palette: #B8B3FF (Purple Illusion), #9C90E0 (Perrywinkle), #7C7BBC (Orbital), #5858B1 (Ultrapurple Merge), #483D77 (Meteorite), #211F4E (Silent Orbit). It mixes purple tones and feels cool overall. The strongest text pairing is #B8B3FF on #211F4E with a contrast ratio of 7.97:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Purple Illusionrgb(184, 179, 255)hsl(244, 100%, 85%)
Perrywinklergb(156, 144, 224)hsl(249, 56%, 72%)
Orbitalrgb(124, 123, 188)hsl(241, 33%, 61%)
Ultrapurple Mergergb(88, 88, 177)hsl(240, 36%, 52%)
Meteoritergb(72, 61, 119)hsl(251, 32%, 35%)
Silent Orbitrgb(33, 31, 78)hsl(243, 43%, 21%)

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.97:1 Very good#B8B3FF on #211F4E
  • Aa7.97:1 Very good#211F4E on #B8B3FF
  • Aa5.46:1 Good#9C90E0 on #211F4E
  • Aa5.46:1 Good#211F4E on #9C90E0
  • Aa4.95:1 Good#B8B3FF on #483D77
  • Aa4.95:1 Good#483D77 on #B8B3FF
  • Aa3.95:1 Poor#7C7BBC on #211F4E
  • Aa3.95:1 Poor#211F4E on #7C7BBC

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Purple Illusion to Silent Orbit — https://swatchly.xyz/palette/b8b3ff-9c90e0-7c7bbc-5858b1-483d77-211f4e */
:root {
  --purple-illusion: #b8b3ff;
  --perrywinkle: #9c90e0;
  --orbital: #7c7bbc;
  --ultrapurple-merge: #5858b1;
  --meteorite: #483d77;
  --silent-orbit: #211f4e;
}

Tailwind CSS v4

/* Purple Illusion to Silent Orbit — https://swatchly.xyz/palette/b8b3ff-9c90e0-7c7bbc-5858b1-483d77-211f4e */
@theme {
  --color-purple-illusion: #b8b3ff;
  --color-purple-illusion-50: #f2f2ff;
  --color-purple-illusion-100: #e6e6ff;
  --color-purple-illusion-200: #d0cfff;
  --color-purple-illusion-300: #b8b3ff;
  --color-purple-illusion-400: #9a95dc;
  --color-purple-illusion-500: #7f79c1;
  --color-purple-illusion-600: #6660a3;
  --color-purple-illusion-700: #514a88;
  --color-purple-illusion-800: #3f396f;
  --color-purple-illusion-900: #312b59;
  --color-purple-illusion-950: #1e1a3a;
  --color-perrywinkle: #9c90e0;
  --color-perrywinkle-50: #f3f2ff;
  --color-perrywinkle-100: #e8e5ff;
  --color-perrywinkle-200: #d3cdff;
  --color-perrywinkle-300: #bcb2fa;
  --color-perrywinkle-400: #9c90e0;
  --color-perrywinkle-500: #8275c3;
  --color-perrywinkle-600: #695ca5;
  --color-perrywinkle-700: #534789;
  --color-perrywinkle-800: #413670;
  --color-perrywinkle-900: #32295a;
  --color-perrywinkle-950: #1f183c;
  --color-orbital: #7c7bbc;
  --color-orbital-50: #f3f3ff;
  --color-orbital-100: #e7e8ff;
  --color-orbital-200: #d0d1ff;
  --color-orbital-300: #b7b8f4;
  --color-orbital-400: #9797d8;
  --color-orbital-500: #7c7bbc;
  --color-orbital-600: #63619f;
  --color-orbital-700: #4e4c83;
  --color-orbital-800: #3c3a6a;
  --color-orbital-900: #2e2c55;
  --color-orbital-950: #1c1a38;
  --color-ultrapurple-merge: #5858b1;
  --color-ultrapurple-merge-50: #f3f4ff;
  --color-ultrapurple-merge-100: #e5e8ff;
  --color-ultrapurple-merge-200: #ccd1ff;
  --color-ultrapurple-merge-300: #b0b6ff;
  --color-ultrapurple-merge-400: #8d92ee;
  --color-ultrapurple-merge-500: #7274d0;
  --color-ultrapurple-merge-600: #5858b1;
  --color-ultrapurple-merge-700: #454492;
  --color-ultrapurple-merge-800: #353377;
  --color-ultrapurple-merge-900: #282660;
  --color-ultrapurple-merge-950: #181740;
  --color-meteorite: #483d77;
  --color-meteorite-50: #f5f4ff;
  --color-meteorite-100: #eae8ff;
  --color-meteorite-200: #d6d1ff;
  --color-meteorite-300: #c1baf3;
  --color-meteorite-400: #a39ad9;
  --color-meteorite-500: #887fbf;
  --color-meteorite-600: #6f66a3;
  --color-meteorite-700: #5a5089;
  --color-meteorite-800: #483d77;
  --color-meteorite-900: #372f5a;
  --color-meteorite-950: #231d3c;
  --color-silent-orbit: #211f4e;
  --color-silent-orbit-50: #f3f4ff;
  --color-silent-orbit-100: #e7e9ff;
  --color-silent-orbit-200: #d0d4ff;
  --color-silent-orbit-300: #b8bcef;
  --color-silent-orbit-400: #989cd3;
  --color-silent-orbit-500: #7f82ba;
  --color-silent-orbit-600: #66699e;
  --color-silent-orbit-700: #525485;
  --color-silent-orbit-800: #41436e;
  --color-silent-orbit-900: #34355b;
  --color-silent-orbit-950: #211f4e;
}

Similar palettes