Electric Blue Color Psychology & Meaning
Electric blue at full saturation is a statement of intent — this is the most intense blue available in sRGB and brands that use it are not trying to blend in.
#FFFFFF
#0047FF
#0024CC
#1A1A1A
Background
Primary Accent
Secondary
Body Text
Electric Blue
boldelectricmodern all brandingtechweb
AAA
WCAG Grade
17.4:1
Contrast Ratio
2,500
Saves
6,700
AI Copies
Use #FFFFFF as the background. Use #0047FF as the primary accent. Use #0024CC as secondary. Use #1A1A1A as body text. Palette: Electric Blue.
Hex Codes, RGB & CMYK Color Values
Technical breakdown for the Electric Blue color scheme. Use these values for web design (HEX/RGB), print projects (CMYK), or specialized design software (HSL).
| Swatch | Design Role | HEX | RGB | CMYK | HSL |
|---|---|---|---|---|---|
| Background Luminance: 100.0% | 255, 255, 255 | 0%, 0%, 0%, 0% | 0°, 0%, 100% | ||
| Primary Accent Luminance: 11.7% | 0, 71, 255 | 100%, 72%, 0%, 0% | 223°, 100%, 50% | ||
| Secondary Luminance: 5.6% | 0, 36, 204 | 100%, 82%, 0%, 20% | 229°, 100%, 40% | ||
| Body Text Luminance: 1.0% | 26, 26, 26 | 0%, 0%, 0%, 90% | 0°, 0%, 10% |
Color Harmony: Triadic Scheme
The Electric Blue palette is built using a triadic relationship between its hues. This ensures that even with high-contrast accents, the overall scheme feels balanced and intentional.
Hue Wheel
A triadic palette is often preferred by professional designers because it balances visual interest with cohesion.
History & Design Context
Electric blue became associated with early internet aesthetics (hyperlink blue) but has been reclaimed by bold consumer brands as a signal of digital confidence and modernity.
Best Design Use Cases
White for surfaces. Full-saturation blue for primary brand elements. Darker blue for hover states. Dark for text. One color used at maximum intensity.
Industries This Palette Suits
Tech brands, digital agencies, bold consumer brands, fashion.
How to Implement the Electric Blue Color Scheme
To use this Electric Blue color palette in your web project, you can copy the following CSS variables or Tailwind CSS configuration. These roles ensure your UI maintains accessibility and visual hierarchy.
Option 1: CSS Variables
:root {
/* {name} Palette - ihatecolors.com */{'
'} --color-bg: {colors[0]};{'
'} --color-primary: {colors[1]};{'
'} --color-secondary: {colors[2]};{'
'} --color-text: {colors[3]};{'
'} {'}'}Web Design Tip
Use #FFFFFF for the main background and #0047FF for primary buttons. This creates a high-contrast focal point.
Accessibility Note
The contrast ratio between #1A1A1A and #FFFFFF is 17.40:1 (AAA). Ensure your body text remains legible.