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 RGBrgb(128, 0, 128) HSLhsl(300, 100%, 25%) CMYKC:0 M:100 Y:0 K:50
Purple Shades and Variations
ShadeHEXDescription Lavender#E6E6FALight, soft purple Violet#EE82EEBright, pinkish Orchid#DA70D6Pink-purple Magenta#FF00FFVibrant pink-purple Purple#800080CSS standard purple Dark Violet#9400D3Rich, vivid Indigo#4B0082Blue-purple Plum#DDA0DDMuted, 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
BrandHEXName
Twitch#9146FFTwitch Purple
Yahoo#6001D2Yahoo Purple
Cadbury#472F92Cadbury Purple
Hallmark#5C315EHallmark 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.