Using Purple Color Codes in Web Design
Purple blends the stability of blue with the energy of red. Light shades like lavender and lilac create calm, serene UI backgrounds, while deep purples like royal purple and plum add luxury and modern elegance to call-to-action buttons and primary headers.
| Colour name | Hex code | RGB value | HSL value | Notes & Info | |
|---|---|---|---|---|---|
| Purple (W3C HTML/CSS) | #800080 | rgb(128, 0, 128) | hsl(300, 100%, 25%) | Official W3C standard web purple named color. | |
| Electric Purple / Magenta | #FF00FF | rgb(255, 0, 255) | hsl(300, 100%, 50%) | Pure 100% red-blue RGB primary shade (Fuchsia). | |
| Rebecca Purple | #663399 | rgb(102, 51, 153) | hsl(270, 50%, 40%) | CSS named color added to honor Eric Meyer’s daughter. | |
| Indigo | #4B0082 | rgb(75, 0, 130) | hsl(275, 100%, 25%) | Deep violet-purple CSS named spectrum color. | |
| Lavender | #E6E6FA | rgb(230, 230, 250) | hsl(240, 67%, 94%) | CSS named color; popular soft UI background tint. | |
| Thistle | #D8BFD8 | rgb(216, 191, 216) | hsl(300, 24%, 80%) | CSS named light desaturated purple pastel. | |
| Plum | #DDA0DD | rgb(221, 160, 221) | hsl(300, 47%, 75%) | Soft mid-light CSS named reddish-purple shade. | |
| Lilac | #C8A2C8 | rgb(200, 162, 200) | hsl(300, 26%, 71%) | Classic floral pale purple shade. | |
| Medium Purple | #9370DB | rgb(147, 112, 219) | hsl(260, 60%, 65%) | Balanced mid-tone CSS named purple. | |
| Blue Violet | #8A2BE2 | rgb(138, 43, 226) | hsl(271, 76%, 53%) | Vibrant CSS named cool-toned purple. | |
| Dark Magenta | #8B008B | rgb(139, 0, 139) | hsl(300, 100%, 27%) | Deep, rich CSS named dark reddish-purple. | |
| Royal Purple | #7851A9 | rgb(120, 81, 169) | hsl(267, 35%, 49%) | Traditional regal purple tone associated with royalty. |
Looking for a broader spectrum of cool and deep tones? Explore our guide to Different Shades of Blue Color or jump directly to the Dark Winter Color Palette