Violet

HEX: #EE82EE | Modern Palette

On White
2.32:1
FAIL
On Black
9.06:1
PASS

Color Specifications

HEX
#EE82EE
RGB
238, 130, 238
HSL
300°, 76% ,72%
CMYK
0, 45, 0, 7

About Violet

Violet (#EE82EE) is a color with RGB(238, 130, 238) and HSL(300°, 76.1%, 72.2%). It is commonly associated with Playful, Romantic moods. In design, it fits Warm styles and is suitable for Text, Button, Accent. Its complementary color is #82EE82, which creates strong contrast. Its triadic palette includes #EEEE82 and #82EEEE. The name comes from violette (Old French).

  • HEX: #EE82EE
  • RGB: 238, 130, 238
  • HSL: 300°, 76.1%, 72.2%
  • Mood: Playful, Romantic
  • Style: Warm
  • Use case: Text, Button, Accent
  • Complementary color: #82EE82
  • Triadic colors: #EEEE82, #82EEEE
  • The name comes from violette (Old French).

Live Components

LIGHT
DARK
System Notification Box

Color Palettes

Monochromatic Five tones of the same hue — a reliable scale for backgrounds, surfaces, and text.
Neutral + Accent Four near-neutral tones grounded by a saturated accent — clean and versatile for UI.
Analogous Five hues drifting across a 60° arc — naturally harmonious and pleasing to the eye.
3 + 1 + 1 Three analogous base colors, one complementary accent, one dark anchor — bold yet balanced.

Color Harmonies

Complementary

The color directly opposite on the color wheel — creates maximum contrast and vibrance.

Analogous

Colors adjacent on the wheel — naturally harmonious and pleasing to the eye.

Triadic

Three colors equally spaced 120° apart — bold, balanced, and visually rich.

Split-Complementary

Two colors flanking the complement — high contrast with less tension than full complementary.

Tetradic (Square)

Four colors at 90° intervals — rich variety, best when one color dominates.

Monochromatic

Shades and tints of the same hue — cohesive, elegant, and easy to work with.

Shades & Tints

A seamless scale of #EE82EE from deepest shade to lightest tint.

Color Characteristics

Mood
Playful Romantic
Style
Warm
Use case
Text Button Accent

Accessibility Simulation

Deuteranopia #ABABEC
Protanopia #9393EE
Tritanopia #E39696
Achromatopsia #AAAAAA

Frequently Asked Questions

Violet (#EE82EE) is a color with RGB(238, 130, 238) and HSL(300°, 76.1%, 72.2%).

#EE82EE pairs strongly with #82EE82 as its complementary color. It can also be used with neutral tones for balanced UI and design layouts.

#EE82EE is suitable for Text, Button, Accent and works well with Warm styles.

#EE82EE is commonly associated with Playful, Romantic.

The name Violet is linked to violette from Old French, meaning The diminutive of 'viole', referring to the small purple flower..

Name, History & Etymology

Origin Word violette
Meaning The diminutive of 'viole', referring to the small purple flower.
Language Old French
First Recorded Use Late Middle Ages

History

The color violet has been recognized since antiquity, often associated with royalty and spirituality due to the rarity and cost of purple dyes. Medieval manuscripts frequently employed violet pigments derived from plants or minerals. In the Renaissance, artists like Titian utilized violet to create depth and richness in their paintings. The development of synthetic dyes in the 19th century made violet more accessible, leading to its widespread use in fashion and art.

First Recorded Use

The English word 'violet' first appeared in the late 14th century, directly borrowed from Old French 'violette'. It was used to describe both the flower and its characteristic color.

Cultural Associations

Violet is often associated with luxury, wisdom, and mystery across various cultures. In Christianity, it symbolizes penance and mourning, particularly during Lent. It is also a significant color in the LGBTQ+ pride movement, representing spirit and individuality.

Similar Named Colors
Light Fuchsia Pink #F984EF ΔE 1.98
Pale Magenta #F984E5 ΔE 3.21
Fuchsia Pink #FF77FF ΔE 3.47
Pink Flamingo #FC74FD ΔE 3.49

Code Snippets

/* Background */
.element {
    background-color: #EE82EE;
}

/* Text */
.element {
    color: #EE82EE;
}

/* Border */
.element {
    border: 1px solid #EE82EE;
}

/* Linear gradient to complementary */
.element {
    background: linear-gradient(
        to right,
        #EE82EE,
        #82EE82
    );
}

/* Radial gradient */
.element {
    background: radial-gradient(
        circle,
        #EE82EE,
        #82EE82
    );
}

// SCSS variable
$violet: #EE82EE;

// With RGB channels (useful for rgba() usage)
$violet-r: 238;
$violet-g: 130;
$violet-b: 238;

// Usage
.element {
    background-color: $violet;
    color: rgba($violet-r, $violet-g, $violet-b, 0.8);
}