THE COLOR LIBRARY / Cool
Purple color codes.
The CSS purple color code is #800080. Its RGB value is rgb(128, 0, 128) and its HSL value is hsl(300, 100%, 25.1%). Start with the exact reference, then choose a shade for the job.
A color name describes a family in everyday language. This page uses the standardized CSS keyword as its reference; your brand’s purple may be different.
Explore the shades ↓COPY. PASTE. MAKE IT YOURS.
Purple in HEX, RGB, and HSL
#800080rgb(128, 0, 128)hsl(300, 100%, 25.1%)HEX and RGB encode the same sRGB reference. HSL is calculated from it and rounded to two decimals for display. These are screen color values, not a CMYK print specification.
ONE COLOR. DIFFERENT ROLES.
Explore purple tints and shades
Select a swatch to see its codes and compare text contrast.
Make the next step clear.
A label, a surface, and room to breathe.
Selected: ReferenceSelected color
Reference · #800080
rgb(128, 0, 128)hsl(300, 100%, 25.1%)The specimen picks whichever of black or white has higher contrast. It demonstrates a pair, not a complete accessible component.
Illustrative scale: tints mix the reference with white, shades with black, by the stated percentage in encoded sRGB channels. This is not a perceptually uniform scale. Black tints and white shades remain useful; mixing black with black or white with white repeats the reference.
Text contrast on purple
The table follows your selected swatch, currently #800080. Decisions use the full calculated ratio; displayed ratios are rounded.
| Text color | Ratio | AA ordinary text | AA large text |
|---|---|---|---|
| Black #000000 | 2.23:1 | Fail · 4.5:1 | Fail · 3:1 |
| White #FFFFFF | 9.42:1 | Pass · 4.5:1 | Pass · 3:1 |
Large text is at least 18pt, or 14pt bold. These numeric checks apply to opaque, solid color pairs. Other criteria, states, backgrounds, and exceptions need review. Read W3C’s contrast guidance.
CSS purple is darker than many colors informally called purple. Use the code, not the name alone, when handing a palette to engineering.
Check a custom color pair ↗IN A REAL INTERFACE
How to use purple in product design
Give it one clear role
Purple can distinguish a brand accent, a special workflow, or an annotation category. Give it a stable role so users can tell a feature highlight from a state that needs action.
A UI example to try
An automation builder can mark automation-related controls with purple while using neutral containers for the rest of the form. Keep errors and validation separate from that category styling.
Work through a real screen
Test purple on a primary action, a focused control, and a selected item. These can share a brand family while still requiring separate role definitions and state treatments. Keep the rest of the specimen quiet enough to evaluate whether the intended next action stands out.
Compare nearby colors by purpose
Compare purple with lavender for a supporting surface and magenta for a more intense accent. A lavender background does not automatically make every purple label readable; verify each approved foreground and surface pair.
- Choose the role. Decide whether purple is a surface, foreground, accent, or status. Name the semantic token after that purpose.
- Test the actual pair. Compare its foreground and background at the intended size. Test hover, selected, focus, and supported themes independently.
- Document the decision. Keep the approved code, usage rule, and contrasting companion together. Preserve labels and non-color cues when communicating a state.
Copy a purple CSS palette
These numeric names are illustrative palette tokens, not a standard scale. Connect approved values to semantic tokens such as --surface-highlight or --text-primary after testing their pairs.
:root {
--purple-100: #E6CCE6;
--purple-300: #B366B3;
--purple-500: #800080;
--purple-700: #600060;
--purple-900: #400040;
}Common questions about purple
What is the HEX code for purple?
The CSS named color purple is #800080. Use that exact value when you want the standardized reference; use your own documented token when you mean a particular brand shade.
Is purple accessible?
A color by itself cannot pass or fail accessibility. The foreground/background pair, content size, interaction state, and meaning all matter. Use the table above for the selected solid-color pair, then review the complete interface.