Electric Blue color palette
Pure RGB blue, #0000FF, and four steps that lighten it toward a soft periwinkle, #9999FF. There's no gray and no navy here, only saturated, screen-native blue that looks almost violet. It's bold and a little brutalist, the blue of hyperlinks and early web pages. Pair it with white for text. Tech startups and design studios with a brutalist streak could use it as their whole brand.
Electric Blue palette in use
Use #0000FF as a full-bleed background or button color with white text. #6666FF and #9999FF suit hover states and illustrations, and #1A1AFF or #3333FF work for borders and focus rings on white pages.
This pair measures 8.59:1, so it works for body text too. The button uses #1A1AFF with white text.
ButtonGood for
- Brutalist portfolio site
- Tech startup branding
- Y2K-style poster
- Design studio zine
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 |
|---|---|---|---|
#0000FF | #9999FF | 3.41:1 | AA large |
#1A1AFF | #9999FF | 3.16:1 | AA large |
Electric Blue palette as code
CSS variables
:root {
--electric-blue-1: #0000FF;
--electric-blue-2: #1A1AFF;
--electric-blue-3: #3333FF;
--electric-blue-4: #6666FF;
--electric-blue-5: #9999FF;
}Tailwind v4
@theme {
--color-electric-blue-1: #0000FF;
--color-electric-blue-2: #1A1AFF;
--color-electric-blue-3: #3333FF;
--color-electric-blue-4: #6666FF;
--color-electric-blue-5: #9999FF;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'electric-blue': {
100: '#0000FF',
200: '#1A1AFF',
300: '#3333FF',
400: '#6666FF',
500: '#9999FF',
},SCSS
$electric-blue-1: #0000FF;
$electric-blue-2: #1A1AFF;
$electric-blue-3: #3333FF;
$electric-blue-4: #6666FF;
$electric-blue-5: #9999FF;JSON
["#0000FF","#1A1AFF","#3333FF","#6666FF","#9999FF"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.