Innocent Snowdrop to Willow Leaf color palette

C3C3FEInnocent Snowdrop 8A7AC0Viola 4E4307Alligator Gladiator 645D93Wizard’s Potion A7A360Willow Leaf

Open in generator Export PNG, PDF, ASE…

About this palette

Innocent Snowdrop to Willow Leaf is a 5-color cool, vintage palette: #C3C3FE (Innocent Snowdrop), #8A7AC0 (Viola), #4E4307 (Alligator Gladiator), #645D93 (Wizard’s Potion), #A7A360 (Willow Leaf). It mixes purple, brown, yellow tones and feels cool overall. The strongest text pairing is #C3C3FE on #4E4307 with a contrast ratio of 5.90:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Innocent Snowdrop	rgb(195, 195, 254)	hsl(240, 97%, 88%)
Viola	rgb(138, 122, 192)	hsl(254, 36%, 62%)
Alligator Gladiator	rgb(78, 67, 7)	hsl(51, 84%, 17%)
Wizard’s Potion	rgb(100, 93, 147)	hsl(248, 22%, 47%)
Willow Leaf	rgb(167, 163, 96)	hsl(57, 29%, 52%)

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.90:1 Good#C3C3FE on #4E4307
Aa5.90:1 Good#4E4307 on #C3C3FE
Aa3.78:1 Poor#4E4307 on #A7A360
Aa3.78:1 Poor#A7A360 on #4E4307
Aa3.56:1 Poor#C3C3FE on #645D93
Aa3.56:1 Poor#645D93 on #C3C3FE

Color blindness preview

CSS variables

/* Innocent Snowdrop to Willow Leaf — https://swatchly.xyz/palette/c3c3fe-8a7ac0-4e4307-645d93-a7a360 */
:root {
  --innocent-snowdrop: #c3c3fe;
  --viola: #8a7ac0;
  --alligator-gladiator: #4e4307;
  --wizard-s-potion: #645d93;
  --willow-leaf: #a7a360;
}

Tailwind CSS v4

/* Innocent Snowdrop to Willow Leaf — https://swatchly.xyz/palette/c3c3fe-8a7ac0-4e4307-645d93-a7a360 */
@theme {
  --color-innocent-snowdrop: #c3c3fe;
  --color-innocent-snowdrop-50: #f9f9ff;
  --color-innocent-snowdrop-100: #eff0ff;
  --color-innocent-snowdrop-200: #dbdbff;
  --color-innocent-snowdrop-300: #c3c3fe;
  --color-innocent-snowdrop-400: #a3a2d8;
  --color-innocent-snowdrop-500: #8685bc;
  --color-innocent-snowdrop-600: #6a699e;
  --color-innocent-snowdrop-700: #535181;
  --color-innocent-snowdrop-800: #403e67;
  --color-innocent-snowdrop-900: #302e51;
  --color-innocent-snowdrop-950: #1d1c35;
  --color-viola: #8a7ac0;
  --color-viola-50: #f5f3ff;
  --color-viola-100: #ece8ff;
  --color-viola-200: #d9d1ff;
  --color-viola-300: #c4b7f6;
  --color-viola-400: #a596db;
  --color-viola-500: #8a7ac0;
  --color-viola-600: #7060a2;
  --color-viola-700: #594a86;
  --color-viola-800: #46386d;
  --color-viola-900: #352a56;
  --color-viola-950: #211939;
  --color-alligator-gladiator: #4e4307;
  --color-alligator-gladiator-50: #fcf6d7;
  --color-alligator-gladiator-100: #f3ecc9;
  --color-alligator-gladiator-200: #e1d8af;
  --color-alligator-gladiator-300: #ccc293;
  --color-alligator-gladiator-400: #aea36e;
  --color-alligator-gladiator-500: #938751;
  --color-alligator-gladiator-600: #786d38;
  --color-alligator-gladiator-700: #605625;
  --color-alligator-gladiator-800: #4e4307;
  --color-alligator-gladiator-900: #3b330d;
  --color-alligator-gladiator-950: #252005;
  --color-wizard-s-potion: #645d93;
  --color-wizard-s-potion-50: #f4f4ff;
  --color-wizard-s-potion-100: #e9e7ff;
  --color-wizard-s-potion-200: #d3cffd;
  --color-wizard-s-potion-300: #bbb6eb;
  --color-wizard-s-potion-400: #9b95cd;
  --color-wizard-s-potion-500: #7f78b0;
  --color-wizard-s-potion-600: #645d93;
  --color-wizard-s-potion-700: #4f4978;
  --color-wizard-s-potion-800: #3e3861;
  --color-wizard-s-potion-900: #2f2a4d;
  --color-wizard-s-potion-950: #1d1932;
  --color-willow-leaf: #a7a360;
  --color-willow-leaf-50: #f8f7d1;
  --color-willow-leaf-100: #efedc3;
  --color-willow-leaf-200: #dcd9a7;
  --color-willow-leaf-300: #c6c389;
  --color-willow-leaf-400: #a7a360;
  --color-willow-leaf-500: #8c8845;
  --color-willow-leaf-600: #726d2c;
  --color-willow-leaf-700: #5b5718;
  --color-willow-leaf-800: #48440a;
  --color-willow-leaf-900: #373403;
  --color-willow-leaf-950: #232000;
}