Piccadilly Purple to Negishi Green color palette

585B90Piccadilly Purple D2C8F2Foggy Love 9892D7Easter Egg 454218Alligator Gladiator 968D4ANegishi Green

Open in generator Export PNG, PDF, ASE…

About this palette

Piccadilly Purple to Negishi Green is a 5-color cool, vintage palette: #585B90 (Piccadilly Purple), #D2C8F2 (Foggy Love), #9892D7 (Easter Egg), #454218 (Alligator Gladiator), #968D4A (Negishi Green). It mixes purple, brown, yellow tones and feels cool overall. The strongest text pairing is #D2C8F2 on #454218 with a contrast ratio of 6.49:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Piccadilly Purple	rgb(88, 91, 144)	hsl(237, 24%, 45%)
Foggy Love	rgb(210, 200, 242)	hsl(254, 62%, 87%)
Easter Egg	rgb(152, 146, 215)	hsl(245, 46%, 71%)
Alligator Gladiator	rgb(69, 66, 24)	hsl(56, 48%, 18%)
Negishi Green	rgb(150, 141, 74)	hsl(53, 34%, 44%)

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.

Aa6.49:1 Good#D2C8F2 on #454218
Aa6.49:1 Good#454218 on #D2C8F2
Aa4.01:1 Poor#585B90 on #D2C8F2
Aa4.01:1 Poor#D2C8F2 on #585B90
Aa3.63:1 Poor#9892D7 on #454218
Aa3.63:1 Poor#454218 on #9892D7
Aa3.03:1 Poor#454218 on #968D4A
Aa3.03:1 Poor#968D4A on #454218

Color blindness preview

CSS variables

/* Piccadilly Purple to Negishi Green — https://swatchly.xyz/palette/585b90-d2c8f2-9892d7-454218-968d4a */
:root {
  --piccadilly-purple: #585b90;
  --foggy-love: #d2c8f2;
  --easter-egg: #9892d7;
  --alligator-gladiator: #454218;
  --negishi-green: #968d4a;
}

Tailwind CSS v4

/* Piccadilly Purple to Negishi Green — https://swatchly.xyz/palette/585b90-d2c8f2-9892d7-454218-968d4a */
@theme {
  --color-piccadilly-purple: #585b90;
  --color-piccadilly-purple-50: #f3f4ff;
  --color-piccadilly-purple-100: #e4e7ff;
  --color-piccadilly-purple-200: #cbcffe;
  --color-piccadilly-purple-300: #b1b6ea;
  --color-piccadilly-purple-400: #9094cc;
  --color-piccadilly-purple-500: #7377ae;
  --color-piccadilly-purple-600: #585b90;
  --color-piccadilly-purple-700: #454775;
  --color-piccadilly-purple-800: #35375e;
  --color-piccadilly-purple-900: #292a4b;
  --color-piccadilly-purple-950: #181931;
  --color-foggy-love: #d2c8f2;
  --color-foggy-love-50: #f1ecff;
  --color-foggy-love-100: #e6dffc;
  --color-foggy-love-200: #d2c8f2;
  --color-foggy-love-300: #bdb4d8;
  --color-foggy-love-400: #9f95bc;
  --color-foggy-love-500: #857ba2;
  --color-foggy-love-600: #6c6387;
  --color-foggy-love-700: #574e6f;
  --color-foggy-love-800: #453d5a;
  --color-foggy-love-900: #352e47;
  --color-foggy-love-950: #211c2d;
  --color-easter-egg: #9892d7;
  --color-easter-egg-50: #f2f2ff;
  --color-easter-egg-100: #e6e5ff;
  --color-easter-egg-200: #d0cdff;
  --color-easter-egg-300: #b8b4f2;
  --color-easter-egg-400: #9892d7;
  --color-easter-egg-500: #7e78bb;
  --color-easter-egg-600: #655e9e;
  --color-easter-egg-700: #504982;
  --color-easter-egg-800: #3f386a;
  --color-easter-egg-900: #302b55;
  --color-easter-egg-950: #1e1a39;
  --color-alligator-gladiator: #454218;
  --color-alligator-gladiator-50: #f8f7dd;
  --color-alligator-gladiator-100: #eeedd1;
  --color-alligator-gladiator-200: #dbdab8;
  --color-alligator-gladiator-300: #c5c39c;
  --color-alligator-gladiator-400: #a6a379;
  --color-alligator-gladiator-500: #8a875c;
  --color-alligator-gladiator-600: #6f6c43;
  --color-alligator-gladiator-700: #585530;
  --color-alligator-gladiator-800: #454218;
  --color-alligator-gladiator-900: #343216;
  --color-alligator-gladiator-950: #201f0b;
  --color-negishi-green: #968d4a;
  --color-negishi-green-50: #fcf8d3;
  --color-negishi-green-100: #f4efc6;
  --color-negishi-green-200: #e2dcab;
  --color-negishi-green-300: #cec78e;
  --color-negishi-green-400: #b0a868;
  --color-negishi-green-500: #968d4a;
  --color-negishi-green-600: #7a712f;
  --color-negishi-green-700: #625a19;
  --color-negishi-green-800: #4d4509;
  --color-negishi-green-900: #3b3502;
  --color-negishi-green-950: #252000;
}