Violet color palettes
Violet is the blue-leaning part of purple: hues between 257 and 290 degrees, saturation from moderate to high, lightness on the dark side. Heavier than lavender, cooler than magenta. Of 100 palettes in the library, 11 have a primary in that band, with saturation from 32 to 75 percent.
Violet palettes in the library
Each card shows the primary and the body contrast. The usual problem with violet primaries is that they look darker than they measure, and that number settles it.
#8f35b5sat 55%14.72:1 · AAA#833ebbsat 50%14.72:1 · AAA#63249esat 63%14.76:1 · AAA#4e2e9fsat 55%15.30:1 · AAA#6418a3sat 74%14.72:1 · AAA#653d76sat 32%14.72:1 · AAA#5b3d76sat 32%14.76:1 · AAA#8755a5sat 32%14.72:1 · AAA#8028d2sat 68%14.76:1 · AAA#8d55a5sat 32%14.72:1 · AAA#ac1dc9sat 75%15.00:1 · AAAWhat violet means on screen
Violet is a flower name that became a color term for the blue-leaning part of purple. Red-purple runs warm, blue-purple runs cool, and violet is the cool side. The test is hue, not depth.
On screen it often stands in for a technical feel, because blue-violet keeps its saturation on dark grounds and works in gradients. Its contrast problem comes from the same place: once darkened, it gets hard to separate from dark text.
Three rules
One: never set body text in violet
Violet looks dark on white but measures brighter than it looks. Body contrast across these 11 runs from 14.72:1 to 15.30:1, and it comes from dark neutral text, not violet text.
Two: give it a neutral ground
With violet as the primary, a page drifts cool overall. A warm neutral ground (off-white, pale taupe) holds it steadier than stacking another light violet on top.
Three: keep it under a third of the screen
Violet carries visual weight. A full violet ground makes content feel weightless; buttons, icons and emphasis blocks are enough.
Violet and the purple tag are not the same set
Purple is the whole hue family; violet takes only its blue-leaning part. 15 palettes here carry the purple tag, and some of those lean magenta or gray, which is why they are not among these 11. That gap is why this page selects by value.
When not to use it
- Anything that needs warmth and approachability. Violet keeps its distance, and it reads cold for children, food and everyday services.
- Discounts and speed claims. In many markets violet is tied to luxury and mystery, which cannot carry a cheap-and-fast message.
- Interfaces that separate violet from gray in small areas. The two blur on dim displays, so state needs more than color.
Common questions
- How is violet different from lavender?
- Lightness and saturation. Lavender is light and muted, close to a pale gray-purple; violet is darker and more saturated. In this library the former sits closer to Morandi, the latter is the band on this page.
- Why are violet primaries on the dark side?
- Because they have to hold white text. A light violet fails 4.5:1 against white, and darkening it until it passes produces these colors. That is a contrast floor rather than a taste.
- Does violet work in dark mode?
- Very well, violet keeps saturation on a dark ground, but it usually needs a lift there or it merges into the background. Run the dark mode converter and read the measured values.
Related tools
Contrast checker →Color blindness simulator →Dark mode converter →See every purple palette →