Color comparison guide

Purple vs Violet: CSS Color Differences & HEX Codes

In CSS, purple is #800080 and violet is #EE82EE. These references have the same HSL hue, but violet is much lighter. That comparison describes two named screen colors; it does not resolve the separate distinction between spectral violet light and purples made by combining wavelengths.

By Color Match · Updated September 14, 2026

Purple

#800080

The exact value of the CSS purple keyword.

Explore #800080

Violet

#EE82EE

The exact value of the CSS violet keyword, not a measurement of a single spectral wavelength.

Explore #EE82EE

Values and text contrast

Exact color values and calculated contrast against white and black
Property	Purple	Violet
HEX	#800080	#EE82EE
RGB	128, 0, 128	238, 130, 238
HSL	300°, 100%, 25%	300°, 76%, 72%
Against white	9.419:1Normal text: AAA	2.317:1Normal text: Fail
Against black	2.230:1Normal text: Fail	9.063:1Normal text: AAA

Values use opaque sRGB colors. HSL is rounded for display and is not a perceptual color-difference score. Contrast classifications use the unrounded WCAG ratio.

Purple and Violet as text and background

Pair contrast: 4.065:1. Normal text: Fail. Large text: AA.

Purple text on Violet

Violet text on Purple

WCAG AA requires 4.5:1 for normal text and 3:1 for large text; AAA requires 7:1 and 4.5:1 respectively. Large text is at least 18 pt (24 CSS px), or 14 pt (about 18.67 CSS px) when bold. These checks cover text contrast, not complete accessibility.

Edit this color comparison Check contrast and find a fix

A readable label on a violet category chip

A filter chip uses CSS violet as its fill and a normal-size “Photography” label. A white label and a purple label produce different outcomes on that same fill.

White label on violet

2.317:1 — Fail normal text AA

Violet is too light for this normal-size white label.

Check #FFFFFF on #EE82EE

Purple label on violet

4.065:1 — Fail normal text AA

The darker CSS purple label is a useful alternative on the original violet fill.

Check #800080 on #EE82EE

Keep the violet fill and choose a darker label. The computed neutral correction below preserves the original white label’s zero chroma; CSS purple offers another checked option with a different visual character. Neither is a substitute for showing which filter is selected.

A correction you can reproduce

Change the foreground while keeping the background fixed. The OKLCH search returns a nearby passing candidate, then measures the final six-digit sRGB colors again. It does not guarantee the mathematically nearest color.

Original pair: #FFFFFF on #EE82EE; 2.317:1 — Fail normal text AA
Corrected pair: #3F3F3F on #EE82EE; 4.545:1 — Pass normal text AA

.example-label {
  color: #3F3F3F;
  background-color: #EE82EE;
}

This snippet contains the checked color pair. Apply the non-color checks below when building the real component.

Recheck the corrected pair Compare original and corrected color

Purple and Violet UI comparison: White label on violet changes from 2.317:1 to 4.545:1 with the corrected pair #3F3F3F on #EE82EE. — Original Color Match diagram for these exact sRGB inputs. The checked values and CSS are also available as text above. Download PNG.

Checks beyond the color pair

Use a checkmark and aria-pressed when the chip toggles a filter.
Keep the label present after selection.
Test the focus ring and target size in the actual filter row.

Why CSS violet looks pinker than expected

Both swatches have equal red and blue RGB channels, but violet also contains a substantial green channel and is lighter overall. CSS color names are established keyword assignments, not a carefully spaced scientific classification of every hue. A color called violet in a flower guide, pigment range, or physics discussion may therefore look different from the CSS swatch. Use the exact value when a name could be interpreted in more than one way.

How to combine purple and violet

Try the darker purple as a heading or compact accent and the lighter violet as an illustration fill or broad decorative area. Evaluate the pairing before putting purple text directly on violet: an attractive difference in the swatches does not settle the text requirement. For a lighter reading surface, a pale tint may be more useful than the named violet itself. Open either color to inspect tints and shades while retaining the original reference.

Screen color, spectral color, and printing

A HEX value specifies an sRGB triplet rather than a light spectrum. An RGB display produces the appearance using its primaries, so a screen preview cannot demonstrate whether a physical source emits a single wavelength or a mixture. Similarly, converting this triplet to unprofiled CMYK does not specify a dependable printing recipe. For this guide, conclusions concern the displayed CSS references and their computed text contrast; physical color reproduction requires its own measured workflow.

Sources and calculation method

CSS keyword values follow the W3C named-color table. A reference described as selected is an editorial swatch. Contrast is calculated from these exact values using WCAG relative luminance.