Violet carries the hex code #EE82EE, which resolves to rgb(238, 130, 238) and hsl(300, 76%, 72%). Red and blue sit at identical values while green runs 108 points behind, which places it at exactly 300° on the color wheel, the midpoint between blue and red.
Violet reaches 2.32:1 against white and 9.06:1 against black, so it fails as light-mode text and clears AAA as a dark-surface color. This page covers every code format, the computed palettes, the four elements where violet performs, and the reason the CSS keyword sits well away from the spectral color it’s named after.
What Is the Color Violet?
Violet occupies 300° on the color wheel at 76% saturation and 72% lightness. The CSS keyword violet maps to #EE82EE, a pale pink-purple that most people would describe as orchid rather than as violet.
The full code set for #EE82EE:
- HEX: #EE82EE
- RGB: rgb(238, 130, 238)
- RGBA: rgba(238, 130, 238, 1)
- HSL: hsl(300, 76%, 72%)
- HSB: 300, 45, 93
- CMYK: 0, 45, 0, 7
Identical red and blue channels put the hue on exactly 300°, which is the magenta axis rather than the blue-leaning position most people picture. That symmetry is why the web value reads pink where spectral violet reads deep blue-purple.
Spectral violet sits at the far short-wavelength end of visible light, around 380 to 450 nanometers, and no RGB display can reproduce it. Screens approximate it by mixing red and blue, which produces magenta rather than the true spectral color.
The gap between name and value causes real confusion in handoff. A designer asking for violet may mean #EE82EE, may mean something closer to indigo at #4B0082, or may mean a mid purple, so the hex has to travel with the word.
How Do Violet, Purple, and Magenta Differ?
Violet, purple, and magenta describe overlapping regions rather than distinct points, and the CSS keywords land in surprising places. Anyone building a purple token set needs the boundaries before the naming drifts.
Here’s what each keyword actually resolves to:
- Violet (#EE82EE): hue 300, lightness 72%, a pale magenta-pink
- Purple (#800080): hue 300, lightness 25%, the same hue at a quarter the lightness
- Magenta and fuchsia (#FF00FF): hue 300, lightness 50%, full saturation
- Indigo (#4B0082): hue 275, lightness 26%, the only one on a different hue
- Orchid (#DA70D6): hue 302, lightness 65%, closest to violet
Three of those five sit on exactly the same hue. Violet, purple, and magenta are one hue at three lightness levels, which means the entire distinction between them is a lightness decision rather than a color decision.
Indigo is the genuine outlier at 275°. It’s the only member of the group that sits on a different part of the wheel, which is why it behaves so differently in a palette.
That relationship simplifies token design considerably. A single hue at 300° with a lightness ramp produces violet, magenta, and purple from one definition, and the three names become three steps rather than three colors.
How Does Violet Appear on Digital Screens?
Violet renders reliably because both red and blue subpixels drive it at high output with green providing the balance. The color sits comfortably inside sRGB, so it doesn’t clip the way a full-saturation magenta can.
The measured values set the constraints:
- #EE82EE on white: 2.32:1, fails AA and the 3:1 non-text floor
- #EE82EE on black: 9.06:1, passes AAA
- Black text on #EE82EE: 9.06:1, passes AAA
- White text on #EE82EE: 2.32:1, fails
- Dark variant #B262B2 on white: 3.98:1, large text and non-text only
Violet occupies a useful middle position among the pale colors in this cluster. At 2.32:1 it’s considerably better than cyan’s 1.25:1 and considerably worse than rose gold’s 3.8:1, which puts it just outside every threshold.
The dark variant nearly rescues it. #B262B2 reaches 3.98:1, so borders, icons, and large headings work while body copy still fails by a small margin.
The shade at #955195 crosses the line at 5.1:1 and passes AA. Anyone who needs readable violet text on white should reach for that value rather than trying to make the base work.
Wide-gamut displays exaggerate the pink. On a P3 screen #EE82EE renders more intense than on sRGB, so a violet that looked gentle in the design file can arrive looking closer to hot pink.
What Are the Shades of Violet?
Shades come from mixing black into #EE82EE while holding hue at 300°:
- #D072D0
- #B262B2
- #955195
- #774177
- #593159
- #3C203C
- #1E101E
The critical step is #955195 at 5.1:1 on white, which passes AA and keeps the violet character intact. Everything lighter than it fails as body text on a light surface.
Tints run toward white through #F08DF0, #F198F1, #F3A4F3, #F4AFF4, #F6BAF6, #F7C5F7, #F9D0F9, and #FADBFA. Those pale steps handle banner fills, selected-row backgrounds, and hover surfaces.
Named neighbors cluster around the same hue axis:
- Orchid (#DA70D6): the nearest, marginally deeper, 2.89:1 on white
- Plum (#DDA0DD): lighter and softer, 2.32:1
- Magenta (#FF00FF): the full-saturation form at the same hue, 3.14:1
- Medium orchid (#BA55D3): deeper and bluer, 3.79:1
- Purple (#800080): the same hue at a quarter lightness, 9.5:1
What UI Elements Work Best with Violet?
Violet belongs on surfaces that host dark content and on dark themes where its contrast finally works in its favour. The 9.06:1 for black text on it is what makes it usable, and the 2.32:1 against white is what limits it.
Body text, links, and functional borders at the base value all fall outside its range. Four element types remain where violet genuinely performs.
Buttons and CTAs with Dark Labels
Violet buttons work when the label sits at near-black. At 9.06:1 the text clears AAA, while white on the same fill fails at 2.32:1, which is the most common mistake with any pale purple.
The shade #955195 handles white labels instead. White on that value reaches 5.1:1 and passes AA at every size, which is the safer default for a design system that standardizes on light labels.
Hover states should step down the shade ramp rather than change opacity. A move to #D072D0 keeps the hue stable, where a transparency shift alters the effective contrast against whatever sits behind.
Status Badges and Category Tags
Badges give violet a natural home, since they’re small and sit outside the red-yellow-green severity ladder. Category markers, “new” labels, and plan tiers all suit it.
Building a soft variant from the tint ramp keeps things readable. A #FADBFA fill with #593159 text produces a legible badge at high contrast where a solid violet fill with white text would fail.
Violet carries no conventional status meaning, which makes it useful for categories and unsuitable for anything a user reads as good or bad.
Data Visualizations
Charts use violet as a categorical series that separates cleanly from blues, greens, and warm hues. Its position at 300° puts it far from every other common series color.
Fills and lines need different values. #EE82EE works for large area fills, and a thin line has to drop to #955195 or it disappears against white gridlines.
Violet also survives red-green color vision deficiency better than red or pink does. Under deuteranopia it shifts toward a muted blue rather than collapsing into the warm end, so it stays distinguishable in a mixed series.
Dark Mode Accents
Dark mode is where violet stops fighting the math. The bright variant #E74BE7 on the computed surface #1D0C1D reaches 5.84:1 and passes AA, so it carries small text, icons, and links.
The base value works there too. At 9.06:1 on pure black, #EE82EE clears AAA without any adjustment, which makes violet one of the easier colors to port into a dark theme.
Saturation should come down slightly on very dark surfaces. Full-intensity violet against near-black reads as neon, and stepping down the ramp restores the register the light-mode value had.
What Are the Best Violet Color Palettes for UI?
Every palette below comes from rotating hue around #EE82EE at fixed saturation and lightness. Because lightness stays at 72%, these schemes produce a set of pale values rather than a light-and-dark pair.
Monochromatic
The monochromatic scheme holds hue at 300° and moves lightness: #EE82EE, #C21BC2, and #FADBFA. This is the most useful of the five, since the dark step gives a genuine accent.
#C21BC2 reaches 4.4:1 on white and covers large text and non-text elements. Mapping puts it on interactive elements, the base on fills, and the tint on surfaces.
Analogous
Analogous pulls neighbors 30° in each direction: #EE82EE, #EE82B8, and #B882EE. A rose and a periwinkle flanking the violet, all at matched lightness.
Cohesive and hierarchy-free. Three values at identical lightness need a dark neutral alongside them or the layout has no anchor.
Complementary
Violet’s complement sits opposite at 120°: #EE82EE paired with #82EE82, a pale green. Maximum hue separation with no contrast separation, since both sit at 72% lightness.
Adjacent surfaces work better than foreground and background. Green text on violet fails, and a green card beside a violet card reads clearly.
Triadic
The triadic scheme gives you #EE82EE, #EEEE82, and #82EEEE: violet, a pale yellow, and a pale cyan. Three distinct hues at matched lightness, which makes an even category system.
Verification under simulation matters here. Matched-lightness triads converge faster under color vision deficiency than saturated sets, since less chroma remains to separate them.
Split-Complementary
Split-complementary softens the pairing: #EE82EE, #B8EE82, and #82EEB8. Violet with a yellow-green and a mint, and the most flexible of the five for a full interface.
A near-black text color anchors the whole thing. Visily’s theme tools can generate the shade ladder beneath each pastel so the dark partners come out accessible rather than mixed by eye.
Which Colors Are Similar to Violet?
Five named colors sit close enough to #EE82EE to substitute for it:
- Orchid (#DA70D6): the nearest neighbor, marginally deeper, 2.89:1 on white
- Plum (#DDA0DD): lighter and softer, 2.32:1
- Medium orchid (#BA55D3): deeper and bluer, 3.79:1
- Magenta (#FF00FF): the same hue at full saturation, 3.14:1
- Purple (#800080): the same hue at a quarter lightness, 9.5:1
Medium orchid is the practical substitution when violet needs more presence. At 3.79:1 it clears the 3:1 non-text floor and the large-text bar, which the base value misses.
Purple demonstrates the lightness-only relationship from the section above. It’s the same 300° hue and it passes AAA on white, which shows how much of a color’s usefulness comes from lightness rather than from hue.
Which Colors Pair Best with Violet?
Near-black is violet’s essential partner. At 9.06:1 it’s the text color that makes every violet surface work, and any layout using this color depends on it.
Deep purple from the shade ramp gives the palette hierarchy. #955195 shares the base’s exact hue, passes AA on white, and provides the text color a pale violet can’t.
Pale green from the complementary scheme balances it. The warm-cool relationship isn’t available here, since violet sits between two warm-adjacent hues, so the green provides the contrast a warm accent normally would.
Warm neutrals prevent the confectionery problem. Cream and warm sand keep violet reading as considered, while cool grays push it toward a candy register.
The 60-30-10 split applies as follows:
- 60% neutral: white, off-white, or near-black surfaces
- 30% violet and its tints: fills, banners, and secondary surfaces
- 10% deep purple: links, primary actions, and interactive elements
Which Colors Should You Avoid Pairing with Violet?
White fails first. At 2.32:1 a violet element on white misses the 3:1 non-text floor, so borders and outlines built that way read as faint smudges rather than as edges.
Two computed near-clashes cause the next problem: #EE82C1 and #C182EE. Both sit 25° away at identical lightness, differing in hue with no luminance difference to define the boundary.
Hot pink is the practical trap. Violet and hot pink sit close enough on the wheel that placing them together makes the violet look like a faded version of the pink rather than a second color.
Blue at similar lightness is the subtler failure. A pale blue beside violet loses its edge because the two share a blue channel at similar output, so the boundary between them softens.
Does Violet Meet Accessibility Standards?
Violet fails WCAG AA against white and passes AAA against black. The 2.32:1 measurement falls below the 4.5:1 body-text threshold and the 3:1 large-text and non-text floors set by the W3C.
Violet lands as follows across the common pairings:
- #EE82EE on white: 2.32:1, fails AA and the 3:1 non-text floor
- White on #EE82EE: 2.32:1, fails
- Black on #EE82EE: 9.06:1, passes AAA
- #955195 on white: 5.1:1, passes AA
- #E74BE7 on #1D0C1D: 5.84:1, passes AA
The black-on-violet result is what keeps the color usable. Any violet surface carrying dark text is compliant at every size and weight.
Color vision deficiency treats violet better than most colors in the pink family. Under protanopia and deuteranopia it shifts toward a muted blue-gray rather than merging with reds, so it retains separation in a mixed palette.
Tritanopia is the harder case. Blue-yellow deficiency pulls violet toward pink and collapses its distinction from the rose family, which matters most in a category system where several nearby hues carry meaning.
How Can You Convert Violet Between HEX, RGB, HSL, CMYK, and Other Color Formats?
Each format describes the same violet from a different angle:
- HEX #EE82EE: the default in design files and CSS, with the symmetric pattern that marks a hue on a primary axis
- RGB rgb(238, 130, 238): identical red and blue channels
- RGBA rgba(238, 130, 238, 1): adds alpha for tinted overlays and selection fills
- HSL hsl(300, 76%, 72%): hue lands on exactly 300°
- HSB 300, 45, 93: the picker model, reporting saturation very differently
- CMYK 0, 45, 0, 7: magenta alone with a small black plate
The repeating hex pattern is a useful signal in itself. Matching first and third channel pairs indicate a hue sitting on one of the primary or secondary axes, which tells you the hue before a picker is opened.
HSL makes the violet ramp predictable. Holding hue at 300° and stepping lightness generates violet, magenta, and purple from one definition, which is the token structure described earlier on this page.
CMYK is where violet loses the most. The 0, 45, 0, 7 mix relies almost entirely on magenta ink, and process magenta can’t reach the intensity the screen shows, so printed violet comes back visibly duller unless a spot color is specified.
Wrapping Up
Violet is a surface color and a dark-mode color rather than a light-mode text color. #EE82EE works for fills, badges, and buttons with near-black labels, #955195 handles anything that has to be read on white, and the base value carries links and small text on dark surfaces where it clears AAA without adjustment.
Those steps don’t need to be mixed by hand. Open Visily and use its AI-powered design tools to generate the violet tint and shade ladder, accessible light and dark theme values, and matched accent pairings across the entire design in one pass.
