Vivid Violet

#9f00ff

High-saturation violet for sharp, cool UI accents

Save
Share

About Vivid Violet

I keep Vivid Violet on a post-it in my palette drawer because it has that punchy purple clarity you notice the moment a mockup stops feeling "on purpose." It's not as deep and weighty as , and it doesn't turn into that dense, ink-like purple you get with . This one reads more like a high-chroma violet with a clean, electric edge, brighter in lightness and more direct in its hit.

I reach for it in product and creator UIs where purple needs to feel energetic without slipping into the near-tingle neon territory of the more electric purples. It's great for selected states, channel emphasis, and focus outlines in streaming apps and media interfaces, plus badges and key timeline markers in creative software. Put it next to sharper accents and it holds attention without looking muddy against neutrals, which is where the darker purples can feel heavy.

Tiny quirk: because it's vivid, it can overpower very pale lavender backgrounds fast, so I usually give it cleaner spacing or a slightly grayer companion purple to keep the hierarchy crisp.

Gradient preview

See how this color looks in an animated mesh gradient.

Conversions

Click any value to copy.

Need this programmatically? Color API

Code snippets

Copy this color into your project.

Contrast checker

WCAG 2.1 contrast ratios. AA requires 4.5:1 for normal text, 3:1 for large. AAA requires 7:1 / 4.5:1.

On White #ffffff

Aa
5.36:1AAAAA Large

On Gray 100 #f5f5f5

Aa
4.92:1AAAAA Large

On Gray 900 #18181b

Aa
3.31:1FailAA Large

On Black #000000

Aa
3.92:1FailAA Large

Variations

Shades

Darker variations, created by mixing toward black.

Tints

Lighter variations, created by mixing toward white.

Tones

Muted variations, created by reducing saturation.

Hues

Hue rotations around the color wheel.

Temperatures

Warm and cool shifts of this color.

Color harmonies

Complementary
Analogous
Triadic
Split Complementary
Tetradic

Suggested palettes

Palettes built around this color.

4 colors
3 colors
4 colors
4 colors

Community palettes

Published palettes that include this color.

Create a gradient with Vivid Violet

Open the generator with this color pre-loaded.

Start creating