Vivid Violet

HEX: #9F00FF | Modern Palette

On White
5.36:1
PASS
On Black
3.92:1
FAIL

Color Specifications

HEX
#9F00FF
RGB
159, 0, 255
HSL
277°, 100% ,100%
CMYK
37.65, 100, 0, 0

About Vivid Violet

Vivid Violet (#9F00FF) is a color with RGB(159, 0, 255) and HSL(277.41°, 100%, 100%). It is commonly associated with Playful moods. In design, it fits Neon styles and is suitable for Text, Button, Background. Its complementary color is #60FF00, which creates strong contrast. Its triadic palette includes Orange Peel (#FF9F00) and #00FF9F. The name comes from Vivid Violet (English).

  • HEX: #9F00FF
  • RGB: 159, 0, 255
  • HSL: 277.41°, 100%, 100%
  • Mood: Playful
  • Style: Neon
  • Use case: Text, Button, Background
  • Complementary color: #60FF00
  • Triadic colors: Orange Peel (#FF9F00), #00FF9F
  • The name comes from Vivid Violet (English).

Live Components

LIGHT
DARK
System Notification Box

Color Palettes

Vivid Violet #9F00FF is used in Monochromatic, Neutral + Accent, Analogous, 3 + 1 + 1 palettes, giving designers ready-made combinations for backgrounds, surfaces, accents, and interface elements.

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

Color Harmonies

Vivid Violet #9F00FF pairs with #60FF00 as its complementary color, and Orange Peel (#FF9F00) and #00FF9F in triadic combinations. These harmony relationships help create balanced color combinations for UI, branding, and design work.

Complementary

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

VIVID VIOLET
Analogous

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

VIVID VIOLET
Triadic

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

VIVID VIOLET
ORANGE PEEL
Split-Complementary

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

VIVID VIOLET
CHARTREUSE (TRADITIONAL)
Tetradic (Square)

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

VIVID VIOLET
Monochromatic

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

VIVID VIOLET

Shades & Tints

The shade and tint range for Vivid Violet #9F00FF moves from dark #10001A tones through the base color to lighter #F5E6FF tones, making it useful for depth, hierarchy, and background variation.

VIVID VIOLET

Color Characteristics

Mood
Playful
Style
Neon
Use case
Text Button Background

Accessibility Simulation

Deuteranopia #5959FE
Protanopia #3737FF
Tritanopia #7F6464
Achromatopsia #6B6B6B

Frequently Asked Questions

Vivid Violet (#9F00FF) is a color with RGB(159, 0, 255) and HSL(277.41°, 100%, 100%).

#9F00FF pairs strongly with #60FF00 as its complementary color. It can also be used with neutral tones for balanced UI and design layouts.

#9F00FF is suitable for Text, Button, Background and works well with Neon styles.

#9F00FF is commonly associated with Playful.

The name Vivid Violet is linked to Vivid Violet from English, meaning A bright, intense shade of violet..

Name, History & Etymology

Origin Word Vivid Violet
Meaning A bright, intense shade of violet.
Language English
First Recorded Use Late 20th Century

History

The word 'vivid' comes from Latin 'vividus' meaning 'lively, animated,' from 'vivere' 'to live.' 'Violet' comes from Old French 'violette,' a diminutive of 'viole' 'violet,' ultimately from Latin 'viola.' The color violet itself has been recognized and used since antiquity, often associated with royalty, spirituality, and magic. The precise naming 'Vivid Violet' distinguishes it from other shades of violet, emphasizing its brightness and saturation. It is often represented by the hexadecimal color code #9F00FF.

First Recorded Use

The specific color name 'Vivid Violet' likely gained traction with the advent of digital color systems and standardized color charts (e.g., X11 color names, web colors) in the late 20th century. While 'vivid' and 'violet' have much older origins, their combination as a specific color name is more recent.

Cultural Associations

In digital and web design, 'Vivid Violet' (or its hex code #9F00FF) is a recognized color. It evokes feelings of creativity, luxury, and sometimes a futuristic or neon aesthetic due to its intensity. It can be seen in branding, fashion, and digital art where a strong, vibrant purple is desired. It's a more energetic shade than traditional, darker violets.

Similar Named Colors
Veronica #A020F0 ΔE 1.95
Electric Violet #8F00FF ΔE 2.56
Blue Violet #8A2BE2 ΔE 4.33
Violet (color Wheel) #7F00FF ΔE 4.89

Code Snippets

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

/* Text */
.element {
    color: #9F00FF;
}

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

/* Linear gradient to complementary */
.element {
    background: linear-gradient(
        to right,
        #9F00FF,
        #FFFFFF
    );
}

/* Radial gradient */
.element {
    background: radial-gradient(
        circle,
        #9F00FF,
        #FFFFFF
    );
}

// SCSS variable
$vivid-violet: #9F00FF;

// With RGB channels (useful for rgba() usage)
$vivid-violet-r: 159;
$vivid-violet-g: 0;
$vivid-violet-b: 255;

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