# Magenta gradient: electric codes between pink and purple

[Canonical HTML page](https://gradiently.design/guide/magenta-gradient)

Magenta is one of the loudest colours on a screen and one of the hardest to tame. These codes show where it sits between pink and purple, what to blend it with, and what happens when it goes to print.

## The short version

- Magenta sits at 300 degrees on the HSL colour wheel, halfway between red and blue, which is why it reads as neither pink nor purple.
- On screens, pure magenta is `#ff00ff`, the same value CSS calls fuchsia.
- Magenta blends cleanly with violet, blue, orange and cyan, but turns grey when blended directly with green.
- Print magenta is far less intense than screen magenta, so bright magenta gradients look duller on paper.
- White type on pure magenta only reaches about 3.1 to 1 contrast, enough for large headlines but not small text.

A **magenta gradient** blends the vivid colour between pink and purple with a neighbour: violet for something electric, orange for heat, cyan for a cyber look, or near black for depth. Pure screen magenta is `#ff00ff`, and it is intense enough that the gradient usually works best when magenta is one end of the blend rather than the whole of it. The codes below cover each direction, with notes on type and on how magenta behaves in print.

## Magenta, pink and purple: where the line falls

On the HSL colour wheel magenta sits at 300 degrees, exactly between red and blue. Slide towards red and it becomes hot pink; slide towards blue and it becomes purple and then violet. Magenta is also famous for not appearing in the rainbow: there is no single wavelength of light for it, and your eye perceives it when it receives red and blue light together. That is part of why it looks so artificial and electric.

| Colour | Hex | Leans | Feels |
| --- | --- | --- | --- |
| Violet | `#7c3aed` | Blue | Calm, creative |
| Purple | `#a21caf` | Slightly blue | Rich, regal |
| Magenta | `#ff00ff` | Neither | Electric, loud |
| Hot magenta | `#e6007e` | Slightly red | Bold, fashionable |
| Hot pink | `#ff4fa3` | Red | Playful, warm |

The neighbourhood around magenta. A magenta gradient usually borrows one of these as its second stop.

- Screen magenta: #ff00ff
- Electric magenta: #e600e6
- Deep magenta: #a3006f
- Wine: #5c0045
- Orchid: #f3a6f0
- Ultraviolet: #6a00f4
- Tangerine: #ff8a3d
- Cyan: #00e5ff

Magenta and its best partners. Ultraviolet, tangerine and cyan each push it in a completely different direction.

If what you really want is softer and warmer, closer to bubblegum or rose than to neon, the [pink gradient](https://gradiently.design/guide/pink-gradient) collection is a better starting point. Magenta earns its place when you want a colour that nobody can scroll past.

## Electric magenta gradient codes

Magenta into violet or blue is the classic electric pairing. It moves along the colour wheel without crossing anything muddy, so the blend stays vivid all the way. These suit music, nightlife, gaming and creative tools. If you want this direction with more blue than magenta, the [purple gradient](https://gradiently.design/guide/purple-gradient) codes take over.

- Magenta to ultraviolet: `linear-gradient(135deg, #ff00ff 0%, #b100e8 50%, #6a00f4 100%)`
- Magenta to electric blue: `linear-gradient(135deg, #ff1fd1 0%, #a83cff 50%, #3a5bff 100%)`
- Magenta to cyan: `linear-gradient(135deg, #ff00ff 0%, #8f6bff 50%, #00e5ff 100%)`
- Orchid pastel: `linear-gradient(135deg, #ffd6fb 0%, #f3a6f0 50%, #d68cf5 100%)`

Cool magentas. Magenta to cyan passes through a soft periwinkle in the middle, which is why it never goes grey.

## Hot magenta and sunset codes

Turn the other way round the wheel and magenta heats up: through hot pink into coral and orange. This is the look of late 1980s graphics, synthwave and vaporwave, and of a lot of summer festival posters. A dark top stop turns it into a dusk. [Vaporwave colours](https://gradiently.design/guide/vaporwave-colors) goes further into that world.

- Magenta to tangerine: `linear-gradient(135deg, #e600e6 0%, #ff2e8a 45%, #ff8a3d 100%)`
- Magenta dusk: `linear-gradient(180deg, #2a0a4a 0%, #a3007d 45%, #ff3d8b 75%, #ffb36b 100%)`

Warm magentas. Keep orange as the lighter end, so the brightest point is warm and the deepest is magenta.

## Deep magenta on dark grounds

Magenta looks most expensive when it glows out of darkness instead of filling the frame. A wine or plum ground with one magenta light reads as luxury fashion or a late night bar; spread across a whole poster, the same magenta reads as a discount flyer. Dark grounds also give white type an easy home.

- Deep magenta: `linear-gradient(160deg, #1a0012 0%, #5c0045 50%, #a3006f 100%)`
- Magenta glow on black: `radial-gradient(circle at 70% 30%, #ff3df5 0%, #a1009b 35%, #3d0040 70%, #12000f 100%)`

Dark magentas. The glow version is the one to reach for when you want magenta to feel premium rather than loud.

> **Avoid magenta to green** Green sits directly opposite magenta, and a straight blend between them passes through grey in the middle. If you want both, let them meet with a hard edge or keep green as a small accent. [Muddy gradients](https://gradiently.design/guide/muddy-gradients) shows why.

## Magenta on screen versus in print

Screen magenta is made of light, while print magenta is ink, one of the four process colours in CMYK. Process magenta is much less intense, usually shown on screen at roughly `#ec008c`. So a magenta gradient that glows on your monitor can look flat and pinkish on a flyer. [RGB vs CMYK](https://gradiently.design/guide/rgb-vs-cmyk) explains the gap, and [print gradients](https://gradiently.design/guide/print-gradients) covers proofing.

### Screen magenta

- Made of red and blue light
- Pure value `#ff00ff`, extremely vivid
- Glows on dark backgrounds
- Works for neon and electric looks

### Print magenta

- Made of ink on paper
- Closer to `#ec008c`, noticeably duller
- Dark grounds can print muddy
- For true neon, printers offer fluorescent spot inks

## Type on a magenta gradient

Magenta is brighter than it looks. White type on pure `#ff00ff` only reaches about 3.1 to 1 contrast, which passes for large headlines but not for small text. Black on the same magenta reaches about 6.7 to 1, but feels heavy. In practice, set white type on the deeper end of the gradient, or darken the magenta behind small words to something like `#a3006f`.

On websites, magenta also makes a striking gradient headline. Keep it to large display sizes, where the contrast holds up, as described in [CSS gradient text](https://gradiently.design/guide/css-gradient-text).

```css
.headline {
  font-size: clamp(2.5rem, 6vw, 5rem);
  background: linear-gradient(90deg, #ff00ff 0%, #6a00f4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
```

A magenta to ultraviolet headline. Use it on a white or very light page: magenta reaches about 3.1 to 1 there and ultraviolet about 7 to 1, while the violet end almost disappears on black.

A vertical story with a vivid magenta and violet background and the words Doors at ten in white

A club night story in a magenta Mark. The words sit on the darker area, where white type is comfortable.

Loud colours are exactly where a background that responds to your words helps most. In Gradiently, a magenta Mark deepens the colour near the letters and keeps its calmest part behind the headline, so the glow stays and the words still read. For the cooler sibling of magenta, see the [cyan gradient](https://gradiently.design/guide/cyan-gradient) codes.

## FAQ

### What is the hex code for magenta?

On screens, pure magenta is #ff00ff, which CSS also calls fuchsia. Print magenta is duller and is usually shown on screen at about #ec008c.

### Is magenta pink or purple?

Neither. It sits exactly between red and blue on the colour wheel; hot pink leans towards red and purple leans towards blue.

### What colours go with a magenta gradient?

Violet, electric blue, cyan, orange and near black all blend cleanly with magenta. Avoid blending it straight into green, which turns grey.

### Can I use white text on magenta?

On pure #ff00ff, white reaches about 3.1 to 1 contrast, so keep it to large headlines. Use a deeper magenta behind smaller white text.

### Why does my magenta look dull when printed?

Printing inks cannot reproduce the intensity of screen magenta. Expect a softer colour, order a proof, or ask your printer about fluorescent pink ink.