Magenta

#ff00ff

Deepest fuchsia-pink peak for high-contrast accents

Save
Share

About Magenta

Magenta like this shows up as a magenta-magenta edge on a dark screen, where it feels sharper than -style pinks but less electrically intense than . 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 feels too tense and 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.

Gradient preview

See how this color looks in an animated mesh gradient.

Conversions

Click any value to copy.

Need this programmatically? Color API

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

Aa
3.14:1FailAA Large

On Gray 100 #f5f5f5

Aa
2.88:1Fail

On Gray 900 #18181b

Aa
5.65:1AAAAA Large

On Black #000000

Aa
6.70:1AAAAA Large

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

Complementary
Analogous
Triadic
Split Complementary
Tetradic

Suggested palettes

Palettes built around this color.

4 colors
3 colors
4 colors
4 colors

Community palettes

Published palettes that include this color.

Similar colors

Create a gradient with Magenta

Open the generator with this color pre-loaded.

Start creating