Shades of Purple
Purples span roughly 255° to 300° on the HSL wheel, between blue and magenta. The family is broad: bluish violets and indigos at the low end, reddish plums and orchids near 300°, and pale lavenders and thistles when lightness is high. Violet-leaning purples carry more blue than red, and plum-leaning ones more red than blue. Most purples pair strong red and blue channels with little green, which keeps them relatively dark for their saturation.
CSS purple is #800080, or rgb(128, 0, 128), the midpoint of red and blue in sRGB. Rebeccapurple (#663399, rgb(102, 51, 153)) was added in CSS Color Level 4 in memory of Rebecca Meyer. CSS indigo (#4B0082) is much darker than the indigo in most UI frameworks. Mediumpurple (#9370DB) is a soft violet at 260°, and orchid (#DA70D6) sits near 302°, leaning pink.
19 purple CSS color names
Sorted from lightest to darkest by OKLCH lightness. Open any color for its codes, shades, harmonies and contrast.
Using purple in design
Purple is associated with creativity, imagination and luxury, and it has become a common primary color for software and fintech brands that want to stand apart from blue. Light lavenders work as gentle backgrounds for onboarding and marketing pages, while deep purples carry premium branding and dark themes well.
Accessibility tip: people with protanopia lose much of the red component of purple, so it can look like blue. If purple and blue mark different states, such as visited and unvisited links or two chart series, add a second cue like an underline, pattern or label. Deep purples pass easily with white text: rebeccapurple measures 8.40:1.