Violet HEX Code
The HEX code for violet is #EE82EE. Violet is a light purple color positioned at the end of the visible light spectrum. CSS violet is brighter and more pink than spectral violet, leaning toward magenta.
Violet Color Values
| Format | Value |
|---|---|
| HEX | #EE82EE |
| RGB | rgb(238, 130, 238) |
| HSL | hsl(300, 76%, 72%) |
| CMYK | C:0 M:45 Y:0 K:7 |
Violet Shades and Variations
| Shade | HEX | Description |
|---|---|---|
| Lavender | #E6E6FA | Very light |
| Violet | #EE82EE | CSS violet |
| Medium Violet Red | #C71585 | Red-tinted |
| Dark Violet | #9400D3 | Deep violet |
| Blue Violet | #8A2BE2 | Blue-tinted |
| Indigo | #4B0082 | Blue-violet |
Violet in Design
Violet conveys:
- Creativity: Artistic, imaginative
- Luxury: Royal, elegant
- Mystery: Mystical, spiritual
- Uniqueness: Non-conformist
Violet vs Purple
| Color | HEX | Appearance |
|---|---|---|
| Violet | #EE82EE | Lighter, pink |
| Purple | #800080 | Darker, richer |
| Magenta | #FF00FF | Vivid pink-violet |
Using Violet in Design
``css
/* Violet accent palette */
:root {
--violet-light: #F5D0FE;
--violet: #EE82EE;
--violet-dark: #A855F7;
}
/* Gradient with violet */
.gradient-violet {
background: linear-gradient(135deg, #EE82EE, #9400D3);
}
``
Tailwind Violet Scale
| Level | HEX | Use |
|---|---|---|
| 50 | #F5F3FF | Backgrounds |
| 500 | #8B5CF6 | Primary |
| 700 | #6D28D9 | Dark |
| 900 | #4C1D95 | Very dark |