CSS Color: Violet
Named CSS color Violet — #EE82EE in HEX, rgb(238, 130, 238) in RGB, hsl(300, 76%, 72%) in HSL.
Color Values
| Format | Value | CSS Usage |
|---|---|---|
| Named | Violet | color: Violet; |
| HEX | #EE82EE | color: #EE82EE; |
| RGB | rgb(238, 130, 238) | color: rgb(238, 130, 238); |
| HSL | hsl(300, 76%, 72%) | color: hsl(300, 76%, 72%); |
About Violet
Violet is a bright, playful pink-purple that sits at 300 degrees (magenta) on the hue wheel. At hex `#EE82EE`, it has nearly equal red (238) and blue (238) with moderate green (130). With 76% saturation and 72% lightness, it is a vivid but not harsh magenta.
In web design, Violet adds a playful, creative energy to designs. It works well for accent elements, illustrations, gradients, and creative portfolios. Its brightness makes it eye-catching without being as aggressive as hot pink or magenta.
For accessibility, Violet against white achieves approximately 2.4:1 contrast, failing WCAG for text. Use it as a decorative element on light surfaces or as text on dark backgrounds where it achieves better contrast.
Violet is lighter and brighter than Purple, and pinker than MediumPurple. Despite the name, CSS Violet is actually closer to a bright magenta than to true spectral violet. It pairs well with dark navy, charcoal, teal, and white. In Tailwind CSS, `fuchsia-300` or `violet-300` are close matches.
FAQ
What is the hex code for Violet?
The CSS named color Violet has the hex code #EE82EE. You can use it in CSS as color: #EE82EE; or simply color: Violet;.
What is Violet in RGB?
In RGB notation, Violet is rgb(238, 130, 238). Use it in CSS as color: rgb(238, 130, 238);.
What is Violet in HSL?
In HSL notation, Violet is hsl(300, 76%, 72%). Use it in CSS as color: hsl(300, 76%, 72%);.
What color category is Violet?
Violet belongs to the Purple color family in the CSS named colors specification.
Can I use the name "Violet" directly in CSS?
Yes. All modern browsers support CSS named colors. You can write color: Violet; or background-color: Violet; directly in your stylesheet. Named colors are case-insensitive.
Try in Color Converter
Convert Violet to other formats, check contrast ratios, explore palettes, and find the closest Tailwind CSS class.
Open Color Converter →