Violet Shades
Every named color in the violet family, with computed conversions and contrast data — membership derived by computed hue, not a hand-maintained list. 34 colors shown below.
Quick facts (computed from this family's 34 members)
- Average lightness: 61%
- Average saturation: 81%
- 17 of 34 pass WCAG AA as normal text on white
- 17 of 34 pass WCAG AA as normal text on black
- Lightest named member: pale lilac
- Darkest named member: dark indigo
- Most saturated member: Indigo
The color science
Violet sits at roughly 255-275°, at the very edge of the visible spectrum nearest ultraviolet (hence the name, from the flower, which in turn gave its name to the wavelength region beyond it that humans can't see) — physically, spectral violet (a single wavelength around 380-450nm) is a genuinely different phenomenon from the 'purple' most people picture, which is actually a non-spectral color the brain constructs by mixing red and blue signals, since no single wavelength of light produces it directly. Isaac Newton is the reason violet is counted as a distinct band in the traditional seven-color rainbow (ROYGBIV) at all — historians of science have noted he specifically wanted seven colors to match the seven notes of a musical scale, a numerological preference rather than a strictly perceptual one, and many people today looking at an actual rainbow have trouble distinguishing a separate indigo and violet band the way Newton's seven-color division implies they should exist. Violet's position at the extreme visible edge also means it's the hue most affected by lens-related chromatic aberration in both cameras and the human eye itself, which is why very short-wavelength violet light is disproportionately responsible for the faint colored fringing sometimes visible at the edge of high-contrast photographed or printed detail. Bees and several other pollinating insects see considerably further into the ultraviolet range than humans do, which means flowers appearing plain white or pale violet to a human eye can display striking, contrasting ultraviolet patterns invisible to us but highly visible to the pollinators the flower actually evolved to attract.
Common uses in design
Violet carries strong creativity, luxury, and spirituality associations across many cultures (it's the color of royalty and clergy in Western tradition, tracing back to Tyrian purple's extreme historical cost — extracted a few drops at a time from sea snails, it was worth more than gold by weight in antiquity), which is why beauty, wellness, and premium-tier product branding lean on it more than mainstream consumer brands typically do. In liturgical use specifically, violet remains the standard color for the Christian seasons of Advent and Lent in Western church traditions, a convention that long predates any secular branding association and has stayed remarkably stable for centuries despite violet's meaning shifting considerably in fashion and consumer branding over the same period. The 19th century also saw violet undergo a genuine mass-market democratization: the accidental 1856 discovery of mauveine by 18-year-old chemist William Perkin (while trying to synthesize quinine) produced the first synthetic aniline dye, and the resulting affordable purple-violet shade, mauve, became such a fashion sensation in Britain that the period is still sometimes referred to by historians as the 'mauve decade.' Violet also carries a specific, more contemporary association in some LGBTQ+ community symbolism and in certain 20th-century feminist movement branding, layering yet another distinct cultural meaning onto the hue well beyond its older royal and religious associations.
Accessibility notes
Violet and its close neighbor purple are frequently confused by name (not by vision — this is a language issue, not a colorblindness one) since English speakers draw the violet/purple/magenta boundaries inconsistently in everyday use; if precision matters for a design spec, specify the hex value rather than relying on the color name alone to communicate intent. As text color, violet needs to be pushed to a reasonably deep, low-lightness value to clear WCAG AA on a white background — the lighter, more pastel violets that read as calm and elegant as large fills routinely fail contrast requirements as small body text, the same general pattern seen across most of the purple-adjacent hue range. Violet's rarity as a semantic UI color also means there's little pre-existing user expectation to work around, which is a genuine accessibility advantage: introducing it as a new status color carries less risk of accidental misreading than reusing an already-overloaded hue like blue or green for a new meaning. That said, testing any new violet semantic token against your product's existing purple or indigo elements for perceptual overlap remains worthwhile, since the absence of a competing convention doesn't guarantee visual separation from a color that's merely nearby on the wheel.
Named examples
BlueViolet and DarkViolet are the two named CSS colors in this band; Violet itself (the paler, more pastel CSS keyword) sits at notably higher lightness than either, making it a genuinely softer, less saturated color than its two darker relatives. The xkcd color survey contributes considerably more granularity here than the CSS set alone, with names like 'blue purple' and 'purpley blue' capturing the fuzzy, disputed boundary between violet and its neighbors the way ordinary speakers actually describe it, rather than the more clinical CSS naming convention. Amethyst, while not a formal CSS keyword, is one of the most common informal names applied to this range in jewelry and gemstone contexts, tracing to the naturally violet-to-purple quartz variety long prized for its color before synthetic dyes existed at all. Lilac and lavender, both flower-derived names, sit at a paler, less saturated point within or near this band and are frequently used interchangeably with pastel violet in casual conversation despite technically naming two distinct plants.
Building a violet design-token scale
Violet is well suited to a dedicated 'creative' or 'premium tier' token distinct from a product's main brand color specifically because it carries almost no competing semantic baggage from red/green/blue/yellow's error/success/link/warning conventions — several subscription products use a violet accent specifically on their upgraded/paid-tier UI elements to visually separate 'premium' from the free-tier's more neutral palette without needing to build a second full brand identity from scratch. Because violet sits so close to both blue and purple, a design system that uses all three as separate tokens needs a genuinely deliberate hue-spacing decision at the outset — picking three values that are perceptually distinct in OKLCH or Lab space, rather than three names that merely sound different, is what actually prevents the tokens from visually collapsing into each other on screen. Violet also reads well as a data-visualization category color specifically because so few competing UI elements are already violet, giving a chart series built around it strong visual separation from a product's more heavily used red/green/blue conventions. A violet token used consistently across a product's premium-tier features also tends to build genuine user recognition over time, functioning almost like a secondary logo mark once users learn to associate the specific hue with upgraded functionality. Because that recognition effect depends on genuine consistency, changing a premium-tier violet token later in a product's life carries real user-facing cost beyond the usual visual-refresh considerations, since some users will have specifically learned to scan for that exact color as a shortcut to premium features.