Violet

#9a0eea

Mid violet balance for softer, less electric accents

Save
Share

About Violet

Violet is the purple I notice first when a UI stop feeling like generic accent color and starts feeling intentional. It lands in the mid-light range, with a cooler violet undertone that doesn't drift into blue the way the more blue-leaning purples do. Compared to 's heavier, authority-heavy depth, Violet stays lighter and cleaner, so it doesn't feel weighted or late-night serious. And unlike 's fresher bruise brightness, Violet holds steadier saturation without reading too electric on the first glance.

I use this shade for selected states, focus rings, and key markers in streaming app interfaces, creator dashboards, and game UI where you want clarity without turning neon. It's also a solid pick for editorial motion graphics and product onboarding screens when you need purple that pops but still plays nice next to cool grays and crisp cyan highlights.

One quirk to watch: on very dark backgrounds it can pull slightly more toward magenta than you expect, so it's worth testing beside your darker purple and a neutral companion 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.79:1AAAAA Large

On Gray 100 #f5f5f5

Aa
5.31:1AAAAA Large

On Gray 900 #18181b

Aa
3.06:1FailAA Large

On Black #000000

Aa
3.62: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.

Similar colors

Create a gradient with Violet

Open the generator with this color pre-loaded.

Start creating