Electric Violet Color Psychology & Meaning
Electric Violet is maximum purple — the color of blacklights, amethyst crystals, and the UV spectrum barely visible to human eyes. It's both scientific and magical.
#F8F0FF
#8B00FF
#6600CC
#1A0033
Background
Primary Accent
Secondary
Body Text
Electric Violet
vibrantcoolnight springsummer brandingweb
AAA
WCAG Grade
17.3:1
Contrast Ratio
2,891
Saves
7,823
AI Copies
Use #F8F0FF as the background. Use #8B00FF as the primary accent. Use #6600CC as secondary. Use #1A0033 as body text/supporting color. Palette mood: Electric Violet — vibrant, cool, night.
Hex Codes, RGB & CMYK Color Values
Technical breakdown for the Electric Violet 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: 89.5% | 248, 240, 255 | 3%, 6%, 0%, 0% | 272°, 100%, 97% | ||
| Primary Accent Luminance: 12.7% | 139, 0, 255 | 45%, 100%, 0%, 0% | 273°, 100%, 50% | ||
| Secondary Luminance: 7.2% | 102, 0, 204 | 50%, 100%, 0%, 20% | 270°, 100%, 40% | ||
| Body Text Luminance: 0.5% | 26, 0, 51 | 49%, 100%, 0%, 80% | 271°, 100%, 10% |
Color Harmony: Analogous Scheme
The Electric Violet palette is built using a analogous relationship between its hues. This ensures that even with high-contrast accents, the overall scheme feels balanced and intentional.
Hue Wheel
A analogous palette is often preferred by professional designers because it creates a calm, serene atmosphere by using neighboring colors.
History & Design Context
Violet sits at the boundary of visible light (380-450nm wavelength). In alchemy, purple represented transmutation. In science, UV light reveals hidden fluorescence.
Best Design Use Cases
White-purple for large surfaces. True electric violet for brand moments. Deep plum for structural elements. Near-black purple for text.
Industries This Palette Suits
Technology, luxury, science brands, beauty.
How to Implement the Electric Violet Color Scheme
To use this Electric Violet 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 #F8F0FF for the main background and #8B00FF for primary buttons. This creates a high-contrast focal point.
Accessibility Note
The contrast ratio between #1A0033 and #F8F0FF is 17.31:1 (AAA). Ensure your body text remains legible.