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 |
Violet is excellent for creative industries, beauty brands, and designs seeking a feminine, artistic touch.A Full Ramp From This Colour
Design systems settle on a 50–900 scale because it covers backgrounds, borders, text and
states without anyone reaching outside the palette. Mixing toward white and black rather
than adjusting HSL lightness keeps more of the hue's character:
| Step | Colour | Contrast on white | Safe for |
|---|---|---|---|
| 50 | #F5F9FF | 1.06:1 | backgrounds and fills |
| 100 | #EBF3FE | 1.12:1 | backgrounds and fills |
| 200 | #CEE0FD | 1.34:1 | backgrounds and fills |
| 300 | #B1CDFB | 1.62:1 | backgrounds and fills |
| 400 | #76A8F9 | 2.40:1 | backgrounds and fills |
| 500 | #3B82F6 | 3.68:1 | large text, borders |
| 600 | #326FD1 | 4.85:1 | body text on white |
| 700 | #295BAC | 6.59:1 | body text on white |
| 800 | #204887 | 8.98:1 | body text on white |
| 900 | #183462 | 12.31:1 | body text on white |
The contrast column is the one that decides usage. Steps below 3:1 cannot carry text at
any size and belong in fills and dividers; steps at 4.5:1 and above are safe for body copy.Adjusting It
Base colour in HSL is hsl(217, 91%, 60%). Two useful moves:
`css
/* +10% lightness, same hue */
--lighter: #6da2f8;
/* −10% lightness */
--darker: #0b64f4;
``
Raising lightness also drops perceived saturation, so a lightened colour reads greyer than its numbers suggest. Adding 5–10% saturation alongside every 20% of lightness keeps the ramp looking like one hue rather than a fade to grey.