Electric Violet color palette
Violet with the dial turned all the way up. #7700FF and #8800FF are almost identical, intense blue-violets, then #AA33FF and #CC66FF move toward purple, and #EEB3FF is a soft orchid. There's no deep shade for text, so pair it with black or white. It looks bold and digital. Creator tools and AI products are good places to put it.
Electric Violet palette in use
Use #7700FF for buttons and hero blocks with white text, and #EEB3FF for light panels with near-black text. #AA33FF and #CC66FF work for gradients, hover states and icons.
This pair measures 12.52:1, so it works for body text too. The button uses #8800FF with white text.
ButtonGood for
- Creator tool landing page
- Nightclub flyer
- Esports team kit
- AI product hero
Readable color pairs
Pairs from this palette with at least 3:1 contrast (WCAG 2). Use AA and AAA pairs for body text, and AA large pairs for headings 24px and up.
| Text | Background | Ratio | Rating |
|---|---|---|---|
#7700FF | #EEB3FF | 3.88:1 | AA large |
#8800FF | #EEB3FF | 3.58:1 | AA large |
Electric Violet palette as code
CSS variables
:root {
--electric-violet-1: #7700FF;
--electric-violet-2: #8800FF;
--electric-violet-3: #AA33FF;
--electric-violet-4: #CC66FF;
--electric-violet-5: #EEB3FF;
}Tailwind v4
@theme {
--color-electric-violet-1: #7700FF;
--color-electric-violet-2: #8800FF;
--color-electric-violet-3: #AA33FF;
--color-electric-violet-4: #CC66FF;
--color-electric-violet-5: #EEB3FF;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'electric-violet': {
100: '#7700FF',
200: '#8800FF',
300: '#AA33FF',
400: '#CC66FF',
500: '#EEB3FF',
},SCSS
$electric-violet-1: #7700FF;
$electric-violet-2: #8800FF;
$electric-violet-3: #AA33FF;
$electric-violet-4: #CC66FF;
$electric-violet-5: #EEB3FF;JSON
["#7700FF","#8800FF","#AA33FF","#CC66FF","#EEB3FF"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.