Purple HEX Code
The HEX code for CSS purple is #800080. Purple is created by mixing red and blue, representing creativity, royalty, and luxury. Note that CSS "purple" (#800080) is darker than the vibrant purple many expect—for brighter purples, consider violet (#EE82EE) or magenta (#FF00FF).
Purple Color Values
| Format | Value |
|---|---|
| HEX | #800080 |
| RGB | rgb(128, 0, 128) |
| HSL | hsl(300, 100%, 25%) |
| CMYK | C:0 M:100 Y:0 K:50 |
Purple Shades and Variations
| Shade | HEX | Description |
|---|---|---|
| Lavender | #E6E6FA | Light, soft purple |
| Violet | #EE82EE | Bright, pinkish |
| Orchid | #DA70D6 | Pink-purple |
| Magenta | #FF00FF | Vibrant pink-purple |
| Purple | #800080 | CSS standard purple |
| Dark Violet | #9400D3 | Rich, vivid |
| Indigo | #4B0082 | Blue-purple |
| Plum | #DDA0DD | Muted, dusty |
| Rebecca Purple | #663399 | Web standard purple |
Purple in Design
Purple conveys:
- Royalty: Luxury, prestige, wealth
- Creativity: Imagination, art
- Spirituality: Wisdom, mystery
- Premium: High-end products
CSS Rebecca Purple
Rebecca Purple (#663399) was added to CSS in 2014 in memory of Rebecca Meyer:
``css
.royal {
background-color: rebeccapurple;
/* Same as */
background-color: #663399;
}
`
Purple Palettes
| Style | Primary | Secondary | Accent |
|---|---|---|---|
| Royal | #663399 | #4B0082 | #9370DB |
| Soft | #E6E6FA | #DDA0DD | #DA70D6 |
| Vibrant | #9400D3 | #8B008B | #FF00FF |
| Modern | #7C3AED | #6366F1 | #A855F7 |
Brand Purples
| Brand | HEX | Name |
|---|---|---|
| Twitch | #9146FF | Twitch Purple |
| Yahoo | #6001D2 | Yahoo Purple |
| Cadbury | #472F92 | Cadbury Purple |
| Hallmark | #5C315E | Hallmark Purple |
| FedEx | #4D148C | FedEx Purple |
Purple in Tailwind CSS
`javascript
// Tailwind purple scale
purple: {
50: '#faf5ff',
100: '#f3e8ff',
200: '#e9d5ff',
500: '#a855f7',
700: '#7e22ce',
900: '#581c87',
}
`
Purple remains popular for creative industries, gaming platforms, and premium brands seeking a distinctive, non-corporate identity.
A Full Ramp From This Colour
Design systems settle on a 50–900 scale because it covers backgrounds, borders, text and
states without anyone reaching outside the palette. Mixing toward white and black rather
than adjusting HSL lightness keeps more of the hue's character:
| Step | Colour | Contrast on white | Safe for |
|---|---|---|---|
| 50 | #F5F9FF | 1.06:1 | backgrounds and fills |
| 100 | #EBF3FE | 1.12:1 | backgrounds and fills |
| 200 | #CEE0FD | 1.34:1 | backgrounds and fills |
| 300 | #B1CDFB | 1.62:1 | backgrounds and fills |
| 400 | #76A8F9 | 2.40:1 | backgrounds and fills |
| 500 | #3B82F6 | 3.68:1 | large text, borders |
| 600 | #326FD1 | 4.85:1 | body text on white |
| 700 | #295BAC | 6.59:1 | body text on white |
| 800 | #204887 | 8.98:1 | body text on white |
| 900 | #183462 | 12.31:1 | body text on white |
The contrast column is the one that decides usage. Steps below 3:1 cannot carry text at
any size and belong in fills and dividers; steps at 4.5:1 and above are safe for body copy.Adjusting It
Base colour in HSL is hsl(217, 91%, 60%). Two useful moves:
`css
/* +10% lightness, same hue */
--lighter: #6da2f8;
/* −10% lightness */
--darker: #0b64f4;
``
Raising lightness also drops perceived saturation, so a lightened colour reads greyer than its numbers suggest. Adding 5–10% saturation alongside every 20% of lightness keeps the ramp looking like one hue rather than a fade to grey.