Magenta HEX Code
The HEX code for magenta is #FF00FF. Magenta is created by combining full red and full blue with no green. It's one of the primary colors in CMYK printing and is also known as fuchsia in web colors.
Magenta Color Values
| Format | Value |
|---|---|
| HEX | #FF00FF |
| RGB | rgb(255, 0, 255) |
| HSL | hsl(300, 100%, 50%) |
| CMYK | C:0 M:100 Y:0 K:0 |
Magenta Shades and Variations
| Shade | HEX | Description |
|---|---|---|
| Lavender | #E6E6FA | Very light |
| Orchid | #DA70D6 | Pink-purple |
| Violet | #EE82EE | Light magenta |
| Magenta / Fuchsia | #FF00FF | Pure magenta |
| Deep Magenta | #CC00CC | Darker |
| Dark Magenta | #8B008B | Very dark |
| Purple | #800080 | Dark red-blue |
Magenta in Design
Magenta conveys:
- Creativity: Artistic, imaginative
- Bold: Eye-catching, vibrant
- Femininity: Fashion, beauty
- Unconventional: Unique, different
Magenta in Printing
Magenta is essential for CMYK printing:
``
CMYK = Cyan, Magenta, Yellow, Key (Black)
Pure magenta: C:0 M:100 Y:0 K:0
`
CSS Usage
`css
.accent {
color: magenta;
/* Same as */
color: #FF00FF;
color: fuchsia;
}
/* Neon magenta */
.neon {
color: #FF00FF;
text-shadow: 0 0 10px #FF00FF;
}
`
Magenta vs Fuchsia vs Pink
| Color | HEX | Description |
|---|---|---|
| Magenta | #FF00FF | Pure red+blue |
| Fuchsia | #FF00FF | Same as magenta |
| Hot Pink | #FF69B4 | Lighter, softer |
| Deep Pink | #FF1493 | More red |
Brand Magenta
| Brand | HEX | Industry |
|---|---|---|
| T-Mobile | #E20074 | Telecom |
| Lyft | #FF00BF | Transportation |
| Telekom | #E20074 | Telecom |
Magenta is perfect for brands wanting to stand out with bold, creative energy that breaks from traditional corporate colors.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.