Purple Void to Mauve color palette

392347Purple Void 5D207FIntergalactic Settlement 82538BMuted Purple A877C3Wisteria C98EDDSomewhere in a Fairytale E7B9FFMauve

Open in generator Export PNG, PDF, ASE…

About this palette

Purple Void to Mauve is a 6-color cool, monochromatic, gradient palette: #392347 (Purple Void), #5D207F (Intergalactic Settlement), #82538B (Muted Purple), #A877C3 (Wisteria), #C98EDD (Somewhere in a Fairytale), #E7B9FF (Mauve). It mixes purple tones and feels cool overall. The strongest text pairing is #392347 on #E7B9FF with a contrast ratio of 8.49:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Purple Void	rgb(57, 35, 71)	hsl(277, 34%, 21%)
Intergalactic Settlement	rgb(93, 32, 127)	hsl(279, 60%, 31%)
Muted Purple	rgb(130, 83, 139)	hsl(290, 25%, 44%)
Wisteria	rgb(168, 119, 195)	hsl(279, 39%, 62%)
Somewhere in a Fairytale	rgb(201, 142, 221)	hsl(285, 54%, 71%)
Mauve	rgb(231, 185, 255)	hsl(279, 100%, 86%)

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.49:1 Very good#392347 on #E7B9FF
Aa8.49:1 Very good#E7B9FF on #392347
Aa6.46:1 Good#5D207F on #E7B9FF
Aa6.46:1 Good#E7B9FF on #5D207F
Aa5.58:1 Good#392347 on #C98EDD
Aa5.58:1 Good#C98EDD on #392347
Aa4.24:1 Poor#5D207F on #C98EDD
Aa4.24:1 Poor#C98EDD on #5D207F

Color blindness preview

CSS variables

/* Purple Void to Mauve — https://swatchly.xyz/palette/392347-5d207f-82538b-a877c3-c98edd-e7b9ff */
:root {
  --purple-void: #392347;
  --intergalactic-settlement: #5d207f;
  --muted-purple: #82538b;
  --wisteria: #a877c3;
  --somewhere-in-a-fairytale: #c98edd;
  --mauve: #e7b9ff;
}

Tailwind CSS v4

/* Purple Void to Mauve — https://swatchly.xyz/palette/392347-5d207f-82538b-a877c3-c98edd-e7b9ff */
@theme {
  --color-purple-void: #392347;
  --color-purple-void-50: #f9f2ff;
  --color-purple-void-100: #f4e4ff;
  --color-purple-void-200: #e2cff1;
  --color-purple-void-300: #cdb7dd;
  --color-purple-void-400: #ae95bf;
  --color-purple-void-500: #9279a3;
  --color-purple-void-600: #765e86;
  --color-purple-void-700: #5d486b;
  --color-purple-void-800: #483654;
  --color-purple-void-900: #392347;
  --color-purple-void-950: #211628;
  --color-intergalactic-settlement: #5d207f;
  --color-intergalactic-settlement-50: #f9f2ff;
  --color-intergalactic-settlement-100: #f3e4ff;
  --color-intergalactic-settlement-200: #e8c9ff;
  --color-intergalactic-settlement-300: #dba9ff;
  --color-intergalactic-settlement-400: #bf85e6;
  --color-intergalactic-settlement-500: #a469cb;
  --color-intergalactic-settlement-600: #884ead;
  --color-intergalactic-settlement-700: #6f3990;
  --color-intergalactic-settlement-800: #5d207f;
  --color-intergalactic-settlement-900: #461d5f;
  --color-intergalactic-settlement-950: #2d0f3f;
  --color-muted-purple: #82538b;
  --color-muted-purple-50: #fdf0ff;
  --color-muted-purple-100: #fae0ff;
  --color-muted-purple-200: #eec6f5;
  --color-muted-purple-300: #d9ace1;
  --color-muted-purple-400: #bb8ac4;
  --color-muted-purple-500: #9e6ea8;
  --color-muted-purple-600: #82538b;
  --color-muted-purple-700: #694071;
  --color-muted-purple-800: #54305b;
  --color-muted-purple-900: #422347;
  --color-muted-purple-950: #2a142e;
  --color-wisteria: #a877c3;
  --color-wisteria-50: #fbf4ff;
  --color-wisteria-100: #f6e8ff;
  --color-wisteria-200: #edceff;
  --color-wisteria-300: #deb4f6;
  --color-wisteria-400: #c293dc;
  --color-wisteria-500: #a877c3;
  --color-wisteria-600: #8b5ba4;
  --color-wisteria-700: #704488;
  --color-wisteria-800: #59326d;
  --color-wisteria-900: #452456;
  --color-wisteria-950: #2c1438;
  --color-somewhere-in-a-fairytale: #c98edd;
  --color-somewhere-in-a-fairytale-50: #fcf4ff;
  --color-somewhere-in-a-fairytale-100: #f9e8ff;
  --color-somewhere-in-a-fairytale-200: #f2cdff;
  --color-somewhere-in-a-fairytale-300: #e3b1f4;
  --color-somewhere-in-a-fairytale-400: #c98edd;
  --color-somewhere-in-a-fairytale-500: #ab72be;
  --color-somewhere-in-a-fairytale-600: #8d56a0;
  --color-somewhere-in-a-fairytale-700: #734083;
  --color-somewhere-in-a-fairytale-800: #5b2e6a;
  --color-somewhere-in-a-fairytale-900: #472153;
  --color-somewhere-in-a-fairytale-950: #2d1235;
  --color-mauve: #e7b9ff;
  --color-mauve-50: #f7e8ff;
  --color-mauve-100: #f1d8ff;
  --color-mauve-200: #e7b9ff;
  --color-mauve-300: #cfa7e4;
  --color-mauve-400: #b388c9;
  --color-mauve-500: #996eae;
  --color-mauve-600: #7e5593;
  --color-mauve-700: #67427a;
  --color-mauve-800: #533263;
  --color-mauve-900: #41254f;
  --color-mauve-950: #291533;
}