HomeColor Encyclopedia
Purple / Violet · 💻 CSS

Violet

#EE82EE

A light vivid purple with natural undertones. CSS standard color "violet", widely used in web design and development.

Generate palette with this color →

Emotion & Mood

Emotion
CalmVibrantCreative
Mood
CheerfulUplifting

Personality & Symbolism

BoldExpressiveOutgoing
Recommended Use

Suitable for accent colors and attention-grabbing elements.

Color Harmonies

Complementary
#ee82ee
+
#81ee81
Split Complementary
#b8ee81
#ee82ee
#81eeb8
Darker Shades
Lighter Tints

Visual Analysis

Hue300°
Saturation76%
Lightness72%
This is a light color with high saturation. It falls in the purple hue family (300°).

Technical Values

HEX#EE82EE
RGBrgb(238, 130, 238)
HSLhsl(300, 76%, 72%)
CMYK0%, 45%, 0%, 7%
ContrastLight
CSSbackground: #ee82ee;

Accessibility — WCAG Contrast

White Text Sample
The quick brown fox jumps.
2.32:1
AA AAA
Black Text Sample
The quick brown fox jumps.
9.06:1
AA AAA

WCAG 2.1 requires a contrast ratio of ≥4.5:1 for AA (normal text) and ≥7:1 for AAA. Best text color for this background: black (#000000).

Color Psychology

Color Temperature

This warm-toned color (hue 300°) triggers psychological responses associated with energy, comfort, and action. Warm colors appear to advance towards the viewer, making elements feel closer and more prominent.

Visual Weight

With 72% lightness, this color feels lightweight and expansive. Light colors psychologically reduce perceived weight of UI elements by up to 20%, making interfaces feel more airy.

Saturation Impact

The high saturation (76%) creates a vibrant, attention-demanding presence. Highly saturated colors are processed faster by the human brain — reaction time decreases by approximately 50ms compared to desaturated variants.

Design Applications

Luxury & Premium

Evokes luxury and exclusivity — perfect for premium brands, beauty products, and high-end fashion.

Art & Spirituality

Connected to imagination and spirituality — ideal for gallery websites, meditation apps, and creative portfolios.

Backgrounds & Space

Light tones create spacious, breathable layouts — ideal for content-heavy pages, minimalist designs, and card backgrounds.

CTAs & Accents

High saturation draws attention — use for primary buttons, notification badges, and important interactive elements.

Similar Colors

藤煤竹 (Fujisusutake)
#574C57
자색 (Purple (Ja))
#800080
Purpley Grey
#947E94
藕灰 (Lotus Root Grey)
#B2A0B2
Violet Pink
#FB5FFC
Deep Violet
#490648
#DDA3DC (Purple Haze)
#DDA3DC
Fuchsia Magenta
#F71BF1