Magenta gradient: electric codes between pink and purple

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.

If what you really want is softer and warmer, closer to bubblegum or rose than to neon, the 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 codes take over.

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 goes further into that world.

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.

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 explains the gap, and print gradients covers proofing.

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.

.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;
}

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 codes.