Matt Purple to Mantis Color Palette

About this palette

Matt Purple to Mantis is a 5-color cool palette: #8F7BD4 (Matt Purple), #D6D0FF (Innocent Snowdrop), #527649 (Irish Clover), #552037 (Drops of God), #66BE5C (Mantis). It mixes purple, green, red tones and feels cool overall. The strongest text pairing is #D6D0FF on #552037 with a contrast ratio of 8.69:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Matt Purple	rgb(143, 123, 212)	hsl(253, 51%, 66%)
Innocent Snowdrop	rgb(214, 208, 255)	hsl(248, 100%, 91%)
Irish Clover	rgb(82, 118, 73)	hsl(108, 24%, 37%)
Drops of God	rgb(85, 32, 55)	hsl(334, 45%, 23%)
Mantis	rgb(102, 190, 92)	hsl(114, 43%, 55%)

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.69:1 Very good#D6D0FF on #552037
Aa8.69:1 Very good#552037 on #D6D0FF
Aa5.51:1 Good#552037 on #66BE5C
Aa5.51:1 Good#66BE5C on #552037
Aa3.61:1 Poor#8F7BD4 on #552037
Aa3.61:1 Poor#552037 on #8F7BD4
Aa3.54:1 Poor#D6D0FF on #527649
Aa3.54:1 Poor#527649 on #D6D0FF

Color blindness preview

CSS variables

/* Matt Purple to Mantis — https://swatchly.xyz/palette/8f7bd4-d6d0ff-527649-552037-66be5c */
:root {
  --matt-purple: #8f7bd4;
  --innocent-snowdrop: #d6d0ff;
  --irish-clover: #527649;
  --drops-of-god: #552037;
  --mantis: #66be5c;
}

Tailwind CSS v4

/* Matt Purple to Mantis — https://swatchly.xyz/palette/8f7bd4-d6d0ff-527649-552037-66be5c */
@theme {
  --color-matt-purple: #8f7bd4;
  --color-matt-purple-50: #f6f5ff;
  --color-matt-purple-100: #edeaff;
  --color-matt-purple-200: #dbd4ff;
  --color-matt-purple-300: #c6baff;
  --color-matt-purple-400: #a997ed;
  --color-matt-purple-500: #8f7bd4;
  --color-matt-purple-600: #745fb5;
  --color-matt-purple-700: #5c4897;
  --color-matt-purple-800: #48367b;
  --color-matt-purple-900: #372762;
  --color-matt-purple-950: #221740;
  --color-innocent-snowdrop: #d6d0ff;
  --color-innocent-snowdrop-50: #f4f3ff;
  --color-innocent-snowdrop-100: #eae7ff;
  --color-innocent-snowdrop-200: #d6d0ff;
  --color-innocent-snowdrop-300: #c0bbe2;
  --color-innocent-snowdrop-400: #a09bc6;
  --color-innocent-snowdrop-500: #857faa;
  --color-innocent-snowdrop-600: #6b658e;
  --color-innocent-snowdrop-700: #554f74;
  --color-innocent-snowdrop-800: #423d5d;
  --color-innocent-snowdrop-900: #332e4a;
  --color-innocent-snowdrop-950: #1f1c30;
  --color-irish-clover: #527649;
  --color-irish-clover-50: #e7fde1;
  --color-irish-clover-100: #dbf4d4;
  --color-irish-clover-200: #c3e1bc;
  --color-irish-clover-300: #aacca2;
  --color-irish-clover-400: #88ad7f;
  --color-irish-clover-500: #6c9163;
  --color-irish-clover-600: #527649;
  --color-irish-clover-700: #3e5e36;
  --color-irish-clover-800: #2e4a27;
  --color-irish-clover-900: #223a1c;
  --color-irish-clover-950: #13240f;
  --color-drops-of-god: #552037;
  --color-drops-of-god-50: #fff1f5;
  --color-drops-of-god-100: #ffe2ec;
  --color-drops-of-god-200: #fac7d9;
  --color-drops-of-god-300: #e7aec3;
  --color-drops-of-god-400: #cb8da4;
  --color-drops-of-god-500: #b07289;
  --color-drops-of-god-600: #93586f;
  --color-drops-of-god-700: #794459;
  --color-drops-of-god-800: #623346;
  --color-drops-of-god-900: #552037;
  --color-drops-of-god-950: #331622;
  --color-mantis: #66be5c;
  --color-mantis-50: #e6ffe3;
  --color-mantis-100: #cafec3;
  --color-mantis-200: #afeea7;
  --color-mantis-300: #91da88;
  --color-mantis-400: #66be5c;
  --color-mantis-500: #49a03f;
  --color-mantis-600: #2b8421;
  --color-mantis-700: #126a06;
  --color-mantis-800: #075300;
  --color-mantis-900: #044000;
  --color-mantis-950: #012800;
}