Electric Dreams color palette
Plum #6A0572 sits at one end and pale orchid #F4D0FF at the other. In the middle is a run of violets about as saturated as purple gets, and #A100F2 in particular is intense. The palette feels late-night and a little theatrical, with enough range to build a full interface from one hue. Try it on a nightclub's event page or a Twitch overlay.
Electric Dreams palette in use
Set #F4D0FF as the background with #6A0572 for text. #A100F2 is the main button color, and #C14AFF or #E58CFF work for hover states, badges and gradients.
This pair measures 8.15:1, so it works for body text too. The button uses #A100F2 with white text.
ButtonGood for
- Nightclub event page
- Twitch stream overlay
- Music app theme
- Bold cosmetics packaging
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 |
|---|---|---|---|
#6A0572 | #F4D0FF | 8.15:1 | AAA |
#6A0572 | #E58CFF | 5.07:1 | AA |
#A100F2 | #F4D0FF | 4.03:1 | AA large |
#6A0572 | #C14AFF | 3.03:1 | AA large |
Electric Dreams palette as code
CSS variables
:root {
--electric-dreams-1: #6A0572;
--electric-dreams-2: #A100F2;
--electric-dreams-3: #C14AFF;
--electric-dreams-4: #E58CFF;
--electric-dreams-5: #F4D0FF;
}Tailwind v4
@theme {
--color-electric-dreams-1: #6A0572;
--color-electric-dreams-2: #A100F2;
--color-electric-dreams-3: #C14AFF;
--color-electric-dreams-4: #E58CFF;
--color-electric-dreams-5: #F4D0FF;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'electric-dreams': {
100: '#6A0572',
200: '#A100F2',
300: '#C14AFF',
400: '#E58CFF',
500: '#F4D0FF',
},SCSS
$electric-dreams-1: #6A0572;
$electric-dreams-2: #A100F2;
$electric-dreams-3: #C14AFF;
$electric-dreams-4: #E58CFF;
$electric-dreams-5: #F4D0FF;JSON
["#6A0572","#A100F2","#C14AFF","#E58CFF","#F4D0FF"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.