Candy Grape Fizz to Vivid Violet Color Palette

About this palette

Candy Grape Fizz to Vivid Violet is a 5-color vibrant, cool, neon palette: #7F58FF (Candy Grape Fizz), #F7A400 (Mad for Mango), #00A4A4 (Silken Jade), #CA97FF (Diva), #9A20FC (Vivid Violet). It mixes purple, orange, turquoise tones and feels cool overall. The strongest text pairing is #F7A400 on #9A20FC with a contrast ratio of 2.58:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Candy Grape Fizz	rgb(127, 88, 255)	hsl(254, 100%, 67%)
Mad for Mango	rgb(247, 164, 0)	hsl(40, 100%, 48%)
Silken Jade	rgb(0, 164, 164)	hsl(180, 100%, 32%)
Diva	rgb(202, 151, 255)	hsl(269, 100%, 80%)
Vivid Violet	rgb(154, 32, 252)	hsl(273, 97%, 56%)

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.

Color blindness preview

CSS variables

/* Candy Grape Fizz to Vivid Violet — https://swatchly.xyz/palette/7f58ff-f7a400-00a4a4-ca97ff-9a20fc */
:root {
  --candy-grape-fizz: #7f58ff;
  --mad-for-mango: #f7a400;
  --silken-jade: #00a4a4;
  --diva: #ca97ff;
  --vivid-violet: #9a20fc;
}

Tailwind CSS v4

/* Candy Grape Fizz to Vivid Violet — https://swatchly.xyz/palette/7f58ff-f7a400-00a4a4-ca97ff-9a20fc */
@theme {
  --color-candy-grape-fizz: #7f58ff;
  --color-candy-grape-fizz-50: #f3f2ff;
  --color-candy-grape-fizz-100: #e7e5ff;
  --color-candy-grape-fizz-200: #d0cdff;
  --color-candy-grape-fizz-300: #b8b1ff;
  --color-candy-grape-fizz-400: #9886ff;
  --color-candy-grape-fizz-500: #7f58ff;
  --color-candy-grape-fizz-600: #683cdd;
  --color-candy-grape-fizz-700: #5425bc;
  --color-candy-grape-fizz-800: #42149c;
  --color-candy-grape-fizz-900: #34087f;
  --color-candy-grape-fizz-950: #210257;
  --color-mad-for-mango: #f7a400;
  --color-mad-for-mango-50: #ffedd8;
  --color-mad-for-mango-100: #ffdfb8;
  --color-mad-for-mango-200: #ffc374;
  --color-mad-for-mango-300: #f7a400;
  --color-mad-for-mango-400: #d08900;
  --color-mad-for-mango-500: #ae7200;
  --color-mad-for-mango-600: #8d5c00;
  --color-mad-for-mango-700: #724900;
  --color-mad-for-mango-800: #5a3900;
  --color-mad-for-mango-900: #482c00;
  --color-mad-for-mango-950: #2e1b00;
  --color-silken-jade: #00a4a4;
  --color-silken-jade-50: #dcfffe;
  --color-silken-jade-100: #bbfdfc;
  --color-silken-jade-200: #9dedec;
  --color-silken-jade-300: #7adada;
  --color-silken-jade-400: #47bebd;
  --color-silken-jade-500: #00a4a4;
  --color-silken-jade-600: #008484;
  --color-silken-jade-700: #006969;
  --color-silken-jade-800: #005151;
  --color-silken-jade-900: #003e3e;
  --color-silken-jade-950: #002727;
  --color-diva: #ca97ff;
  --color-diva-50: #f2e8ff;
  --color-diva-100: #ead8ff;
  --color-diva-200: #dbbbff;
  --color-diva-300: #ca97ff;
  --color-diva-400: #ac7bde;
  --color-diva-500: #9361c4;
  --color-diva-600: #7a4aa7;
  --color-diva-700: #64378c;
  --color-diva-800: #512974;
  --color-diva-900: #411e5f;
  --color-diva-950: #2a103f;
  --color-vivid-violet: #9a20fc;
  --color-vivid-violet-50: #f7f3ff;
  --color-vivid-violet-100: #f1e9ff;
  --color-vivid-violet-200: #e3d2ff;
  --color-vivid-violet-300: #d3b7ff;
  --color-vivid-violet-400: #bd8dff;
  --color-vivid-violet-500: #ab61ff;
  --color-vivid-violet-600: #9a20fc;
  --color-vivid-violet-700: #7d00d1;
  --color-vivid-violet-800: #6200a6;
  --color-vivid-violet-900: #4b0082;
  --color-vivid-violet-950: #300056;
}