Violent Violet to Aquamarine color palette

7E2AFFViolent Violet 0082FCAzure 96A000Noxious 86A1FFFennel Flower 7DBCFFCooler Than Ever 00E6A9Aquamarine

Open in generator Export PNG, PDF, ASE…

About this palette

Violent Violet to Aquamarine is a 6-color vibrant, cool, neon palette: #7E2AFF (Violent Violet), #0082FC (Azure), #96A000 (Noxious), #86A1FF (Fennel Flower), #7DBCFF (Cooler Than Ever), #00E6A9 (Aquamarine). It mixes purple, blue, green, turquoise tones and feels cool overall. The strongest text pairing is #7E2AFF on #00E6A9 with a contrast ratio of 3.52:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Violent Violet	rgb(126, 42, 255)	hsl(264, 100%, 58%)
Azure	rgb(0, 130, 252)	hsl(209, 100%, 49%)
Noxious	rgb(150, 160, 0)	hsl(64, 100%, 31%)
Fennel Flower	rgb(134, 161, 255)	hsl(227, 100%, 76%)
Cooler Than Ever	rgb(125, 188, 255)	hsl(211, 100%, 75%)
Aquamarine	rgb(0, 230, 169)	hsl(164, 100%, 45%)

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.

Aa3.52:1 Poor#7E2AFF on #00E6A9
Aa3.52:1 Poor#00E6A9 on #7E2AFF

Color blindness preview

CSS variables

/* Violent Violet to Aquamarine — https://swatchly.xyz/palette/7e2aff-0082fc-96a000-86a1ff-7dbcff-00e6a9 */
:root {
  --violent-violet: #7e2aff;
  --azure: #0082fc;
  --noxious: #96a000;
  --fennel-flower: #86a1ff;
  --cooler-than-ever: #7dbcff;
  --aquamarine: #00e6a9;
}

Tailwind CSS v4

/* Violent Violet to Aquamarine — https://swatchly.xyz/palette/7e2aff-0082fc-96a000-86a1ff-7dbcff-00e6a9 */
@theme {
  --color-violent-violet: #7e2aff;
  --color-violent-violet-50: #f5f3ff;
  --color-violent-violet-100: #ece9ff;
  --color-violent-violet-200: #d9d3ff;
  --color-violent-violet-300: #c4b8ff;
  --color-violent-violet-400: #a890ff;
  --color-violent-violet-500: #9166ff;
  --color-violent-violet-600: #7e2aff;
  --color-violent-violet-700: #6600d9;
  --color-violent-violet-800: #5000ac;
  --color-violent-violet-900: #3e0088;
  --color-violent-violet-950: #27005a;
  --color-azure: #0082fc;
  --color-azure-50: #eff6ff;
  --color-azure-100: #deecff;
  --color-azure-200: #bddaff;
  --color-azure-300: #96c3ff;
  --color-azure-400: #59a2ff;
  --color-azure-500: #0082fc;
  --color-azure-600: #0068cd;
  --color-azure-700: #0052a4;
  --color-azure-800: #004083;
  --color-azure-900: #003167;
  --color-azure-950: #001e44;
  --color-noxious: #96a000;
  --color-noxious-50: #f0f9b5;
  --color-noxious-100: #e4eda0;
  --color-noxious-200: #ced97b;
  --color-noxious-300: #b6c152;
  --color-noxious-400: #96a000;
  --color-noxious-500: #7d8500;
  --color-noxious-600: #656c00;
  --color-noxious-700: #505600;
  --color-noxious-800: #3f4400;
  --color-noxious-900: #313500;
  --color-noxious-950: #1f2200;
  --color-fennel-flower: #86a1ff;
  --color-fennel-flower-50: #f4f7ff;
  --color-fennel-flower-100: #e8eeff;
  --color-fennel-flower-200: #cedbff;
  --color-fennel-flower-300: #b0c4ff;
  --color-fennel-flower-400: #86a1ff;
  --color-fennel-flower-500: #6b84df;
  --color-fennel-flower-600: #5168bf;
  --color-fennel-flower-700: #3d50a0;
  --color-fennel-flower-800: #2d3c83;
  --color-fennel-flower-900: #202d68;
  --color-fennel-flower-950: #121a45;
  --color-cooler-than-ever: #7dbcff;
  --color-cooler-than-ever-50: #e5f1ff;
  --color-cooler-than-ever-100: #d1e7ff;
  --color-cooler-than-ever-200: #abd3ff;
  --color-cooler-than-ever-300: #7dbcff;
  --color-cooler-than-ever-400: #619edd;
  --color-cooler-than-ever-500: #4684c3;
  --color-cooler-than-ever-600: #2e6aa6;
  --color-cooler-than-ever-700: #1c548b;
  --color-cooler-than-ever-800: #0f4272;
  --color-cooler-than-ever-900: #06345d;
  --color-cooler-than-ever-950: #02203d;
  --color-aquamarine: #00e6a9;
  --color-aquamarine-50: #e1fff1;
  --color-aquamarine-100: #bbffe1;
  --color-aquamarine-200: #82f4c6;
  --color-aquamarine-300: #00e6a9;
  --color-aquamarine-400: #00c18d;
  --color-aquamarine-500: #00a075;
  --color-aquamarine-600: #00815d;
  --color-aquamarine-700: #006649;
  --color-aquamarine-800: #005038;
  --color-aquamarine-900: #003d2a;
  --color-aquamarine-950: #002719;
}