Magenta
#ff00ff
Deepest fuchsia-pink peak for high-contrast accents
About Magenta
Magenta like this shows up as a magenta-magenta edge on a dark screen, where it feels sharper than Candy-style pinks but less electrically intense than Barbara. This shade sits in that tight band where it reads high-saturation magenta without going full neon overload. The undertone is decisively cool, so it looks intentional even next to hot UI accents.
I use it when the design needs a confident cue that still feels finished, not overdriven. Think dashboards and finance apps callouts, verification and status pills in messaging, and campaign CTAs for beauty and music streaming where you want the action to pop but stay controlled. It's also a good pick for hero banners on charcoal headers, especially when Hot Magenta feels too tense and Barbara feels too aggressive.
Pair it with clean whites, true blacks, or neutral grays. If you throw it over warm creams or peachy photography, the cool magenta shifts fast and starts reading compromised instead of deliberate.
Code snippets
Copy this color into your project.
Contrast checker
WCAG 2.1 contrast ratios. AA requires 4.5:1 for normal text, 3:1 for large. AAA requires 7:1 / 4.5:1.
On White #ffffff
On Gray 100 #f5f5f5
On Gray 900 #18181b
On Black #000000
Variations
Shades
Darker variations, created by mixing toward black.
Tints
Lighter variations, created by mixing toward white.
Tones
Muted variations, created by reducing saturation.
Hues
Hue rotations around the color wheel.
Temperatures
Warm and cool shifts of this color.
Color harmonies
Suggested palettes
Palettes built around this color.
Community palettes
Published palettes that include this color.