Purple Protégé to Herbal Vapours color palette

53346EPurple Protégé 653AA6Poppy Pompadour 7D5FB4Simply Purple 8CB15CBroccoli ACC900Leafy Canopy E1FAC8Herbal Vapours

Open in generator Export PNG, PDF, ASE…

About this palette

Purple Protégé to Herbal Vapours is a 6-color cool palette: #53346E (Purple Protégé), #653AA6 (Poppy Pompadour), #7D5FB4 (Simply Purple), #8CB15C (Broccoli), #ACC900 (Leafy Canopy), #E1FAC8 (Herbal Vapours). It mixes purple, green tones and feels cool overall. The strongest text pairing is #53346E on #E1FAC8 with a contrast ratio of 8.98:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Purple Protégé	rgb(83, 52, 110)	hsl(272, 36%, 32%)
Poppy Pompadour	rgb(101, 58, 166)	hsl(264, 48%, 44%)
Simply Purple	rgb(125, 95, 180)	hsl(261, 36%, 54%)
Broccoli	rgb(140, 177, 92)	hsl(86, 35%, 53%)
Leafy Canopy	rgb(172, 201, 0)	hsl(69, 100%, 39%)
Herbal Vapours	rgb(225, 250, 200)	hsl(90, 83%, 88%)

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.98:1 Very good#53346E on #E1FAC8
Aa8.98:1 Very good#E1FAC8 on #53346E
Aa6.91:1 Good#653AA6 on #E1FAC8
Aa6.91:1 Good#E1FAC8 on #653AA6
Aa5.33:1 Good#53346E on #ACC900
Aa5.33:1 Good#ACC900 on #53346E
Aa4.49:1 Poor#7D5FB4 on #E1FAC8
Aa4.49:1 Poor#E1FAC8 on #7D5FB4

Color blindness preview

CSS variables

/* Purple Protégé to Herbal Vapours — https://swatchly.xyz/palette/53346e-653aa6-7d5fb4-8cb15c-acc900-e1fac8 */
:root {
  --purple-prot-g: #53346e;
  --poppy-pompadour: #653aa6;
  --simply-purple: #7d5fb4;
  --broccoli: #8cb15c;
  --leafy-canopy: #acc900;
  --herbal-vapours: #e1fac8;
}

Tailwind CSS v4

/* Purple Protégé to Herbal Vapours — https://swatchly.xyz/palette/53346e-653aa6-7d5fb4-8cb15c-acc900-e1fac8 */
@theme {
  --color-purple-prot-g: #53346e;
  --color-purple-prot-g-50: #f8f2ff;
  --color-purple-prot-g-100: #f2e5ff;
  --color-purple-prot-g-200: #e4cbfe;
  --color-purple-prot-g-300: #d0b3ed;
  --color-purple-prot-g-400: #b293d2;
  --color-purple-prot-g-500: #9777b7;
  --color-purple-prot-g-600: #7d5d9a;
  --color-purple-prot-g-700: #654880;
  --color-purple-prot-g-800: #53346e;
  --color-purple-prot-g-900: #3f2953;
  --color-purple-prot-g-950: #281836;
  --color-poppy-pompadour: #653aa6;
  --color-poppy-pompadour-50: #f6f3ff;
  --color-poppy-pompadour-100: #ede7ff;
  --color-poppy-pompadour-200: #ddcfff;
  --color-poppy-pompadour-300: #cab3ff;
  --color-poppy-pompadour-400: #af8af8;
  --color-poppy-pompadour-500: #956ddd;
  --color-poppy-pompadour-600: #7b53bf;
  --color-poppy-pompadour-700: #653aa6;
  --color-poppy-pompadour-800: #4f2c84;
  --color-poppy-pompadour-900: #3e1f6a;
  --color-poppy-pompadour-950: #271047;
  --color-simply-purple: #7d5fb4;
  --color-simply-purple-50: #f6f3ff;
  --color-simply-purple-100: #efe8ff;
  --color-simply-purple-200: #dfd2ff;
  --color-simply-purple-300: #cdb6ff;
  --color-simply-purple-400: #b094ea;
  --color-simply-purple-500: #9679d0;
  --color-simply-purple-600: #7d5fb4;
  --color-simply-purple-700: #644896;
  --color-simply-purple-800: #4f367a;
  --color-simply-purple-900: #3d2761;
  --color-simply-purple-950: #261640;
  --color-broccoli: #8cb15c;
  --color-broccoli-50: #e8ffd0;
  --color-broccoli-100: #ddf6c1;
  --color-broccoli-200: #c7e4a5;
  --color-broccoli-300: #aecf87;
  --color-broccoli-400: #8cb15c;
  --color-broccoli-500: #719540;
  --color-broccoli-600: #587924;
  --color-broccoli-700: #43610d;
  --color-broccoli-800: #324c00;
  --color-broccoli-900: #263b00;
  --color-broccoli-950: #162500;
  --color-leafy-canopy: #acc900;
  --color-leafy-canopy-50: #e8fcaa;
  --color-leafy-canopy-100: #dcf294;
  --color-leafy-canopy-200: #c6df6b;
  --color-leafy-canopy-300: #acc900;
  --color-leafy-canopy-400: #90a900;
  --color-leafy-canopy-500: #788d00;
  --color-leafy-canopy-600: #607200;
  --color-leafy-canopy-700: #4d5b00;
  --color-leafy-canopy-800: #3c4800;
  --color-leafy-canopy-900: #2e3800;
  --color-leafy-canopy-950: #1c2300;
  --color-herbal-vapours: #e1fac8;
  --color-herbal-vapours-50: #f1fee5;
  --color-herbal-vapours-100: #e1fac8;
  --color-herbal-vapours-200: #d1e3bf;
  --color-herbal-vapours-300: #b8cca4;
  --color-herbal-vapours-400: #96ac80;
  --color-herbal-vapours-500: #7a9063;
  --color-herbal-vapours-600: #607549;
  --color-herbal-vapours-700: #4a5c35;
  --color-herbal-vapours-800: #384926;
  --color-herbal-vapours-900: #2a381a;
  --color-herbal-vapours-950: #19230e;
}