CSS Color: Purple
Named CSS color Purple — #800080 in HEX, rgb(128, 0, 128) in RGB, hsl(300, 100%, 25%) in HSL.
Color Values
| Format | Value | CSS Usage |
|---|---|---|
| Named | Purple | color: Purple; |
| HEX | #800080 | color: #800080; |
| RGB | rgb(128, 0, 128) | color: rgb(128, 0, 128); |
| HSL | hsl(300, 100%, 25%) | color: hsl(300, 100%, 25%); |
About Purple
Purple is a dark magenta created by combining equal parts red (128) and blue (128) with no green. At hex `#800080`, it sits at 300 degrees on the hue wheel with full saturation and 25% lightness. This is pure magenta at a dark value — technically more of a "dark magenta" than what most people picture as purple.
In web design, Purple is associated with creativity, royalty, luxury, and wisdom. It is widely used in beauty brands, creative agencies, and spiritual or wellness websites. Purple visited links have been a web convention since the earliest browsers.
For accessibility, Purple against white achieves approximately 9.5:1 contrast, easily passing WCAG AAA for all text sizes. This makes it one of the most accessible saturated colors for text on light backgrounds.
Purple's complement is Green (both at 128, 0 in their respective channels). It pairs well with gold, cream, lavender, light pink, and white. In Tailwind CSS, `purple-900` or `fuchsia-900` are approximate matches.
FAQ
What is the hex code for Purple?
The CSS named color Purple has the hex code #800080. You can use it in CSS as color: #800080; or simply color: Purple;.
What is Purple in RGB?
In RGB notation, Purple is rgb(128, 0, 128). Use it in CSS as color: rgb(128, 0, 128);.
What is Purple in HSL?
In HSL notation, Purple is hsl(300, 100%, 25%). Use it in CSS as color: hsl(300, 100%, 25%);.
What color category is Purple?
Purple belongs to the Purple color family in the CSS named colors specification.
Can I use the name "Purple" directly in CSS?
Yes. All modern browsers support CSS named colors. You can write color: Purple; or background-color: Purple; directly in your stylesheet. Named colors are case-insensitive.
Related Colors
Try in Color Converter
Convert Purple to other formats, check contrast ratios, explore palettes, and find the closest Tailwind CSS class.
Open Color Converter →