Grapes of Italy to Meteorite Color Palette

About this palette

Grapes of Italy to Meteorite is a 5-color cool palette: #684B92 (Grapes of Italy), #E6AFEC (Candy Dreams), #E799AD (Passion Potion), #9971AB (Crown Jewels), #4C4064 (Meteorite). It mixes purple, pink tones and feels cool overall. The strongest text pairing is #E6AFEC on #4C4064 with a contrast ratio of 5.26:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Grapes of Italy	rgb(104, 75, 146)	hsl(265, 32%, 43%)
Candy Dreams	rgb(230, 175, 236)	hsl(294, 62%, 81%)
Passion Potion	rgb(231, 153, 173)	hsl(345, 62%, 75%)
Crown Jewels	rgb(153, 113, 171)	hsl(281, 26%, 56%)
Meteorite	rgb(76, 64, 100)	hsl(260, 22%, 32%)

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.26:1 Good#E6AFEC on #4C4064
Aa5.26:1 Good#4C4064 on #E6AFEC
Aa4.30:1 Poor#E799AD on #4C4064
Aa4.30:1 Poor#4C4064 on #E799AD
Aa3.89:1 Poor#684B92 on #E6AFEC
Aa3.89:1 Poor#E6AFEC on #684B92
Aa3.18:1 Poor#684B92 on #E799AD
Aa3.18:1 Poor#E799AD on #684B92

Color blindness preview

CSS variables

/* Grapes of Italy to Meteorite — https://swatchly.xyz/palette/684b92-e6afec-e799ad-9971ab-4c4064 */
:root {
  --grapes-of-italy: #684b92;
  --candy-dreams: #e6afec;
  --passion-potion: #e799ad;
  --crown-jewels: #9971ab;
  --meteorite: #4c4064;
}

Tailwind CSS v4

/* Grapes of Italy to Meteorite — https://swatchly.xyz/palette/684b92-e6afec-e799ad-9971ab-4c4064 */
@theme {
  --color-grapes-of-italy: #684b92;
  --color-grapes-of-italy-50: #f7f3ff;
  --color-grapes-of-italy-100: #efe6ff;
  --color-grapes-of-italy-200: #e0cfff;
  --color-grapes-of-italy-300: #ceb6f9;
  --color-grapes-of-italy-400: #b195df;
  --color-grapes-of-italy-500: #977ac5;
  --color-grapes-of-italy-600: #7e61a9;
  --color-grapes-of-italy-700: #684b92;
  --color-grapes-of-italy-800: #523975;
  --color-grapes-of-italy-900: #3f2a5d;
  --color-grapes-of-italy-950: #28193e;
  --color-candy-dreams: #e6afec;
  --color-candy-dreams-50: #fef3ff;
  --color-candy-dreams-100: #fde5ff;
  --color-candy-dreams-200: #f4cbf8;
  --color-candy-dreams-300: #e6afec;
  --color-candy-dreams-400: #c390c9;
  --color-candy-dreams-500: #a773ad;
  --color-candy-dreams-600: #8a5990;
  --color-candy-dreams-700: #704375;
  --color-candy-dreams-800: #59325d;
  --color-candy-dreams-900: #452449;
  --color-candy-dreams-950: #2c142f;
  --color-passion-potion: #e799ad;
  --color-passion-potion-50: #ffe7ec;
  --color-passion-potion-100: #ffd5de;
  --color-passion-potion-200: #f8b7c7;
  --color-passion-potion-300: #e799ad;
  --color-passion-potion-400: #c77d91;
  --color-passion-potion-500: #ad6478;
  --color-passion-potion-600: #914d60;
  --color-passion-potion-700: #783b4d;
  --color-passion-potion-800: #622c3c;
  --color-passion-potion-900: #50212f;
  --color-passion-potion-950: #34131d;
  --color-crown-jewels: #9971ab;
  --color-crown-jewels-50: #faf0ff;
  --color-crown-jewels-100: #f6e2ff;
  --color-crown-jewels-200: #e8c8f7;
  --color-crown-jewels-300: #d3afe4;
  --color-crown-jewels-400: #b58dc7;
  --color-crown-jewels-500: #9971ab;
  --color-crown-jewels-600: #7e588f;
  --color-crown-jewels-700: #664375;
  --color-crown-jewels-800: #51335e;
  --color-crown-jewels-900: #3f264a;
  --color-crown-jewels-950: #281630;
  --color-meteorite: #4c4064;
  --color-meteorite-50: #f6f3ff;
  --color-meteorite-100: #eee7ff;
  --color-meteorite-200: #dbd2f2;
  --color-meteorite-300: #c6bbe0;
  --color-meteorite-400: #a89cc4;
  --color-meteorite-500: #8e81a9;
  --color-meteorite-600: #74688e;
  --color-meteorite-700: #5e5376;
  --color-meteorite-800: #4c4064;
  --color-meteorite-900: #3a314c;
  --color-meteorite-950: #251e32;
}