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.