Holographic color palette
Tilt a holographic sticker and these are the colors that flash across it. Hot pink, tangerine, lemon and aqua are all at full strength, and electric violet #7B2FFF is the one deep tone. As flat fills they're loud. Blended into a gradient they shimmer, and that's where the palette looks its best. Y2K fashion drops and festival posters are the obvious homes for it.
Holographic palette in use
#7B2FFF is dark enough for headings on white or on #FFE800. Use #FF6EC7 for buttons, and blend #12FFF7, #FFE800 and #FF9A3C into gradient backgrounds behind violet type.
This pair measures 4.54:1, so it works for body text too. The button uses #FF6EC7 with black text.
ButtonGood for
- Y2K fashion drop
- Music festival poster
- Teen beauty packaging
- Gradient hero background
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 |
|---|---|---|---|
#7B2FFF | #FFE800 | 4.54:1 | AA |
#7B2FFF | #12FFF7 | 4.51:1 | AA |
Holographic palette as code
CSS variables
:root {
--holographic-1: #FF6EC7;
--holographic-2: #FF9A3C;
--holographic-3: #FFE800;
--holographic-4: #12FFF7;
--holographic-5: #7B2FFF;
}Tailwind v4
@theme {
--color-holographic-1: #FF6EC7;
--color-holographic-2: #FF9A3C;
--color-holographic-3: #FFE800;
--color-holographic-4: #12FFF7;
--color-holographic-5: #7B2FFF;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'holographic': {
100: '#FF6EC7',
200: '#FF9A3C',
300: '#FFE800',
400: '#12FFF7',
500: '#7B2FFF',
},SCSS
$holographic-1: #FF6EC7;
$holographic-2: #FF9A3C;
$holographic-3: #FFE800;
$holographic-4: #12FFF7;
$holographic-5: #7B2FFF;JSON
["#FF6EC7","#FF9A3C","#FFE800","#12FFF7","#7B2FFF"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.