UI Shades

A study in purple

Magenta

#FF00FF

also known as fuchsia

Family
Purple
L
0.702
C
0.322
H
328°

Notes

Magenta is one of the four CMYK process inks and one of the most saturated colors a screen can produce. The CSS hex is identical to Fuchsia at #ff00ff, an artifact of two separate HTML and X11 color lists merging. Cultural associations are pop, theater, drag, tech-industry rebrand attempts. Large fields of magenta fatigue the eye in seconds, so it works strictly as an accent. Pair with deep teal or charcoal for high-contrast pairings. Body text contrast against white fails AA at every size; the full-saturation value belongs on surfaces, badges, and dark-text overlays only.

#ff00ff
Magenta
Magenta
#ff00ff
oklch(0.702 0.322 328.36)
rgb(255 0 255)
hsl(300 100% 50%)
Share
#fff1ff
#ffe7ff
#ffceff
#ffafff
#ff63ff
#ff00ff
#c000c0
#9f00a0
#760076
#530053
#300030

See your palette on a real UI - coming soon

Preview these shades across buttons, cards, and components in a live interface.

Plate 02

Palette built around Magenta

Cross-reference
Q&A

Frequently asked questions

What is Magenta?

Magenta is one of the four CMYK process inks and one of the most saturated colors a screen can produce. The CSS hex is identical to Fuchsia at #ff00ff, an artifact of two separate HTML and X11 color lists merging. Its hex code is #FF00FF.

What are the tints and shades of Magenta?

uishades builds an 11-step OKLCH ramp for Magenta (#FF00FF) - its lightest tints through its darkest shades - plus an 11-stop Tailwind scale (50–950), both keyed to the same 50–950 stops. Lightness steps stay evenly spaced and the hue stays stable, so the mid-tones don't go muddy.

What colors pair well with Magenta?

Its complementary color is #00C33B. Triadic partners are #C89700 and #00B6CD; analogous neighbours are #FF469D and #B27AFF.

What are the OKLCH and RGB values of Magenta?

Magenta is #FF00FF - OKLCH 0.702 0.322 328°, rgb(255 0 255), in the purple family. Also known as fuchsia.