Purple Illusion to Meteorite color palette

C2BAF9Purple Illusion D48BC4Pink Punk BC6CADLavendless 36875EPrimal Green 625600Ayahuasca Vine 433970Meteorite

Open in generator Export PNG, PDF, ASE…

About this palette

Purple Illusion to Meteorite is a 6-color palette: #C2BAF9 (Purple Illusion), #D48BC4 (Pink Punk), #BC6CAD (Lavendless), #36875E (Primal Green), #625600 (Ayahuasca Vine), #433970 (Meteorite). It mixes purple, pink, green, brown tones and feels balanced overall. The strongest text pairing is #C2BAF9 on #433970 with a contrast ratio of 5.68:1, and 1 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Purple Illusion	rgb(194, 186, 249)	hsl(248, 84%, 85%)
Pink Punk	rgb(212, 139, 196)	hsl(313, 46%, 69%)
Lavendless	rgb(188, 108, 173)	hsl(311, 37%, 58%)
Primal Green	rgb(54, 135, 94)	hsl(150, 43%, 37%)
Ayahuasca Vine	rgb(98, 86, 0)	hsl(53, 100%, 19%)
Meteorite	rgb(67, 57, 112)	hsl(251, 33%, 33%)

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.

Aa5.68:1 Good#C2BAF9 on #433970
Aa5.68:1 Good#433970 on #C2BAF9
Aa4.10:1 Poor#C2BAF9 on #625600
Aa4.10:1 Poor#625600 on #C2BAF9
Aa4.03:1 Poor#D48BC4 on #433970
Aa4.03:1 Poor#433970 on #D48BC4

Color blindness preview

CSS variables

/* Purple Illusion to Meteorite — https://swatchly.xyz/palette/c2baf9-d48bc4-bc6cad-36875e-625600-433970 */
:root {
  --purple-illusion: #c2baf9;
  --pink-punk: #d48bc4;
  --lavendless: #bc6cad;
  --primal-green: #36875e;
  --ayahuasca-vine: #625600;
  --meteorite: #433970;
}

Tailwind CSS v4

/* Purple Illusion to Meteorite — https://swatchly.xyz/palette/c2baf9-d48bc4-bc6cad-36875e-625600-433970 */
@theme {
  --color-purple-illusion: #c2baf9;
  --color-purple-illusion-50: #f6f5ff;
  --color-purple-illusion-100: #eceaff;
  --color-purple-illusion-200: #d8d4ff;
  --color-purple-illusion-300: #c2baf9;
  --color-purple-illusion-400: #a29bd5;
  --color-purple-illusion-500: #877eb9;
  --color-purple-illusion-600: #6c649c;
  --color-purple-illusion-700: #564d80;
  --color-purple-illusion-800: #423b67;
  --color-purple-illusion-900: #332c52;
  --color-purple-illusion-950: #1f1a35;
  --color-pink-punk: #d48bc4;
  --color-pink-punk-50: #fff3fc;
  --color-pink-punk-100: #ffe5f8;
  --color-pink-punk-200: #ffc8f1;
  --color-pink-punk-300: #edafdf;
  --color-pink-punk-400: #d48bc4;
  --color-pink-punk-500: #b56fa6;
  --color-pink-punk-600: #975489;
  --color-pink-punk-700: #7b3e6f;
  --color-pink-punk-800: #632d58;
  --color-pink-punk-900: #4d2045;
  --color-pink-punk-950: #31112b;
  --color-lavendless: #bc6cad;
  --color-lavendless-50: #fff2fc;
  --color-lavendless-100: #ffe4f9;
  --color-lavendless-200: #ffc6f2;
  --color-lavendless-300: #f1abe3;
  --color-lavendless-400: #d688c7;
  --color-lavendless-500: #bc6cad;
  --color-lavendless-600: #9d5190;
  --color-lavendless-700: #813b75;
  --color-lavendless-800: #672a5d;
  --color-lavendless-900: #511d49;
  --color-lavendless-950: #340f2f;
  --color-primal-green: #36875e;
  --color-primal-green-50: #ddffea;
  --color-primal-green-100: #cbfade;
  --color-primal-green-200: #b2eac9;
  --color-primal-green-300: #96d7b1;
  --color-primal-green-400: #71bb91;
  --color-primal-green-500: #52a177;
  --color-primal-green-600: #36875e;
  --color-primal-green-700: #1e6d47;
  --color-primal-green-800: #095635;
  --color-primal-green-900: #004327;
  --color-primal-green-950: #002a17;
  --color-ayahuasca-vine: #625600;
  --color-ayahuasca-vine-50: #fdf7cf;
  --color-ayahuasca-vine-100: #f4edc1;
  --color-ayahuasca-vine-200: #e2d9a5;
  --color-ayahuasca-vine-300: #cdc386;
  --color-ayahuasca-vine-400: #afa35f;
  --color-ayahuasca-vine-500: #948840;
  --color-ayahuasca-vine-600: #796d25;
  --color-ayahuasca-vine-700: #625600;
  --color-ayahuasca-vine-800: #4d4300;
  --color-ayahuasca-vine-900: #3b3300;
  --color-ayahuasca-vine-950: #252000;
  --color-meteorite: #433970;
  --color-meteorite-50: #f5f4ff;
  --color-meteorite-100: #eae8ff;
  --color-meteorite-200: #d6d1ff;
  --color-meteorite-300: #bfb9f1;
  --color-meteorite-400: #a099d5;
  --color-meteorite-500: #857dba;
  --color-meteorite-600: #6b639d;
  --color-meteorite-700: #554d82;
  --color-meteorite-800: #433970;
  --color-meteorite-900: #332d54;
  --color-meteorite-950: #201b37;
}