#EEEAE4Understand. Compare. Create.
Purple: 31 shades, names and colour codes
Explore purple shades, HTML and RGB codes, colour meanings and ideas for combining purple in your projects.
Colour code and CSS reference
The CSS keyword purple corresponds to #800080. It represents one specific purple shade, not the entire colour family.
- HEX
- #800080
- RGB
- 128, 0, 128
- CMYK ≈
- 0%, 100%, 0%, 50%
- HSL
- 300°, 100%, 25%
In CSS, purple is #800080 and violet is #EE82EE. Everyday purple shade names are not exact equivalents of these keywords.
The displayed CMYK values are estimates without a print profile.
Meaning and perception
The purple family ranges from pale mauves to deep purples. It may evoke creativity or ceremony, but these interpretations are not universal.
Which colours go with it?
When pairing purple, notice whether it leans towards blue or red. Lavender, plum and vivid purple need different companions. A neutral base lets you assess the shade first; a warm accent or neighbouring colour can then give the arrangement a more individual direction.
Purple and ochre: keep the accent contained
Plum and muted ochre explore a warm-cool contrast without using two brilliant colours. Try plum on one clearly defined main surface and ochre on a few details. On a poster, a small ochre shape may be enough. If you replace ochre with lemon yellow, test it again over a smaller area.
Purple and grey: choose the right separation
Lavender can sit beside pearl grey in a light composition, but the two may need clearer separation. Add an edge, a texture or a darker element. Deep purple with light grey gives a different reading: grey becomes a resting surface around purple. Compare lightness before adding more shades.
Purple and green: connect the pair with a neutral
Greyed mauve and sage can be connected by ecru. For a denser palette, test aubergine and olive while keeping enough light space. With patterned clothing, repeat just one of the colours in the accessories: the pattern already connects them, so every colour does not need to be repeated.
Lavender or aubergine: adjust the depth
To compare them, keep the background and change only the purple. Lavender makes small undertone differences more noticeable; aubergine changes the distribution of light and dark areas more strongly. On screen, also check purple in neighbouring images: a logo and a photograph can contain substantially different purples.
Try this palette: plum, ochre and pale stone
Give pale stone the largest area, then try roughly a quarter plum and a few ochre accents. Assign ochre to one precise detail: a handle, graphic rule or small illustration rather than all of them at once.
#63445F#C2A052Suggested palette with copyable HEX codes for your own trials. These sRGB previews are not certified paint or textile specifications.
A common trap: treating all purples as one shade
A blue purple may feel out of step beside reddish plum even though both belong to the same family. For a tonal palette, compare undertones first and lightness second. If contrast is the aim, make it visible and support it with a neutral rather than leaving an uncertain near-match.
Shades of purple
The names and previews below come from the site’s shade directory. Several codes may share a common name; these shades are not certified RAL or Pantone equivalents.
#660099#884DA7#370028#6600FF#BD33A4#702963#DE3163#6A455D#FD3F92#C9A0DC#D2CAEC#DF73FF#791CF8#2E006C#9683EC#AC1E44#B666D2#FF00FF#800080#DB0073#D473D4#DA70D6#CFA0E9#9E0E40#811453#F9429E#FF007F#C71585#723E64#A10684#6C0277Get the free colour kit: HEX/RGB codes and a project worksheet.