Magenta carries the hex code #FF00FF, which resolves to rgb(255, 0, 255) and hsl(300, 100%, 50%). Red and blue both sit at maximum output while green sits at zero, which places it at exactly 300° on the color wheel and makes it the direct opposite of green.
Magenta is also the only color in this cluster that corresponds to no wavelength of light at all. At 3.14:1 on white it clears the large-text bar, and its dark variant #BF00BF passes AA at 5.29:1. This page covers every code format, the computed palettes, the four elements where magenta performs, and why the brain has to invent this color rather than receive it.
What Is the Color Magenta?
Magenta occupies 300° with full saturation and 50% lightness. CSS provides two keywords, magenta and fuchsia, and both resolve to #FF00FF, which makes them another aliased pair among the named web colors.
The full code set for #FF00FF:
- HEX: #FF00FF
- RGB: rgb(255, 0, 255)
- RGBA: rgba(255, 0, 255, 1)
- HSL: hsl(300, 100%, 50%)
- HSB: 300, 100, 100
- CMYK: 0, 100, 0, 0
The CMYK reading reveals magenta’s dual role. At 0, 100, 0, 0 it’s a single process ink at full strength, one of the three subtractive primaries, while on screen it’s a secondary produced by mixing red and blue light.
Two channels at maximum with one at zero also give magenta a moderate luminance rather than an extreme one. Red and blue are the two lowest-weighted channels in the luminance formula, which is why magenta measures far darker than cyan despite the identical structure.
Why Does Magenta Have No Wavelength?
Magenta is extra-spectral, meaning no single wavelength of light produces it. Every other hue on the wheel corresponds to a band in the spectrum, and magenta corresponds to a gap.
The perceptual mechanism works as follows:
- Red cones and blue cones fire together: the stimulus comes from both ends of the spectrum
- Green cones stay quiet: no wavelength between the two is present
- The brain assigns a color to that pattern: magenta is the label for an absent middle
Nothing in the rainbow shows it for exactly that reason. A spectrum runs continuously from red through green to violet, and magenta would have to sit outside both ends simultaneously.
The color wheel exists because of this. Bending the linear spectrum into a circle requires a bridge between its two ends, and magenta is that bridge, which is why it sits opposite green rather than anywhere in the visible band.
The practical consequence is narrow but real. Magenta can’t be produced by a monochromatic light source, so laser displays and some narrow-gamut technologies render it through mixing rather than directly, and its appearance varies more across those technologies than a spectral hue does.
How Does Magenta Appear on Digital Screens?
Magenta renders at full intensity on every panel, since red and blue subpixels both run at maximum. Wide-gamut displays push it further than sRGB, so the same hex can read considerably hotter on a P3 screen.
The measured values are the friendliest among the fully saturated colors:
- #FF00FF on white: 3.14:1, large text and non-text only
- #FF00FF on black: 6.7:1, passes AA
- Dark variant #BF00BF on white: 5.29:1, passes AA
- Bright variant #FF33FF on #1D0C1D: 6.39:1, passes AA
- White text on #FF00FF: 3.14:1, large text only
Magenta occupies a genuinely useful middle position. Cyan at the same saturation reaches 1.25:1 and yellow reaches 1.07:1, while magenta clears 3:1, which makes it the only one of the three subtractive primaries usable as a border or a large heading on white.
The dark variant does the rest. #BF00BF at 5.29:1 passes AA for body copy, so a single shade step turns magenta into a working text color.
Both light and dark themes are covered without a large value shift, which is unusual. The base passes AA on black and the shade passes AA on white, so one hue family serves both.
What Are the Shades of Magenta?
Shades come from mixing black into #FF00FF while holding hue at 300°:
- #DF00DF
- #BF00BF
- #9F009F
- #800080
- #600060
- #400040
- #200020
The step at #800080 is worth recognizing, since it corresponds exactly to the CSS purple keyword. Magenta and purple are one hue at two lightness levels, which means a purple token and a magenta token can come from a single definition.
Tints run toward white through #FF1BFF, #FF36FF, #FF50FF, #FF6BFF, #FF86FF, #FFA1FF, #FFBBFF, and #FFD6FF. The step at #EE82EE in the same region is the CSS violet keyword, which completes the set of three names on one hue.
Named neighbors sit close on the same axis:
- Violet (#EE82EE): the same hue at 72% lightness, 2.32:1 on white
- Purple (#800080): the same hue at 25% lightness, 9.5:1
- Orchid (#DA70D6): hue 302, softer, 2.89:1
- Deep pink (#FF1493): hue 328, warmer, 3.64:1
- Medium orchid (#BA55D3): hue 288, bluer, 3.79:1
What UI Elements Work Best with Magenta?
Magenta belongs on elements that need to stand apart from every conventional semantic color. The 3.14:1 on white covers non-text and large text, and the 5.29:1 from the shade covers everything else.
Small text at the base value and any use inside a severity ladder fall outside its range, since magenta carries no conventional status meaning. Four element types remain where it genuinely performs.
Buttons and CTAs
Magenta buttons work in either direction with the right value. White on #FF00FF sits at 3.14:1 and covers large labels only, so a small label needs the fill dropped to #BF00BF where white reaches 5.29:1.
Black labels on the base value give the same 3.14:1, so the choice of label color changes nothing. The fill value is the lever here, unlike most colors in this cluster.
Hover states come from the shade ramp. A step to #DF00DF keeps the hue stable, where an opacity change alters the effective contrast against whatever sits behind.
Brand Accents and Large Headings
Headings are where the base value earns its place. At 3.14:1 magenta clears the 3:1 large-text bar, so display type and section headers can carry it directly.
Icons and rules work at the base value too, since non-text elements need 3:1. Body copy has to drop to #BF00BF or deeper.
Magenta reads as deliberate rather than accidental in a way few saturated colors manage. Its distance from every conventional interface hue means it signals brand rather than state.
Data Visualizations
Charts use magenta as a categorical series that separates from blues, greens, and warm hues alike. Its position at 300° puts it far from every common series color.
It also survives red-green color vision deficiency well. Under deuteranopia magenta shifts toward blue rather than collapsing into the warm end, so it stays distinguishable in a mixed series.
Data labels can sit on a #BF00BF fill directly. Most saturated chart colors force labels outside the bar, and magenta’s shade ramp avoids that.
Dark Mode Accents
Dark mode suits magenta with minimal adjustment. The bright variant #FF33FF on the computed surface #1D0C1D reaches 6.39:1 and passes AA, close to the base value’s behavior on pure black.
Saturation should come down slightly on very dark surfaces. Full-intensity magenta against near-black reads as neon, and stepping down the tint ramp restores a calmer register.
What Are the Best Magenta Color Palettes for UI?
Every palette below comes from rotating hue around #FF00FF at fixed saturation and lightness, so each scheme is computed rather than curated.
Monochromatic
The monochromatic scheme holds hue at 300° and moves lightness: #FF00FF, #990099, and #FF66FF. All three are usable, which is unusual for a full-saturation base.
#990099 reaches 7.6:1 on white and passes AAA. Mapping places it on text, the base on fills, and #FF66FF on hover surfaces.
Analogous
Analogous pulls neighbors 30° in each direction: #FF00FF, #FF0080, and #7F00FF. A rose-red and a violet-blue flanking the magenta, all at full saturation.
The violet at #7F00FF reaches 6.5:1 on white and passes AA. Analogous schemes rarely produce a member that carries text, and this one does.
Complementary
Magenta’s complement sits directly opposite at 120°: #FF00FF paired with #00FF00, pure green. Maximum hue tension and a substantial luminance gap, since green measures far brighter.
That luminance mismatch is the catch. Green at 1.37:1 on white fails everything, so the pairing works on dark surfaces and needs a darkened green in light mode.
Triadic
The triadic scheme lands on the subtractive primaries: #FF00FF, #FFFF00, and #00FFFF. Magenta, yellow, and cyan together form the CMY set, which is worth recognizing as the print primaries rather than an arbitrary trio.
Magenta is the only member that clears 3:1 on white. The other two belong on dark surfaces, where all three produce a balanced high-contrast group.
Split-Complementary
Split-complementary softens the clash: #FF00FF, #80FF00, and #00FF80. Magenta against a chartreuse and a spring green, with a third value for secondary actions.
This scheme is the most flexible of the five for a product interface. Visily’s theme tools can generate the tint and shade ladder for each value so hover and active states come out accessible rather than hand-mixed.
Which Colors Are Similar to Magenta?
Five named colors sit close enough to #FF00FF to substitute for it:
- Violet (#EE82EE): the same hue at higher lightness, 2.32:1 on white
- Purple (#800080): the same hue at lower lightness, 9.5:1
- Orchid (#DA70D6): hue 302, softer and paler, 2.89:1
- Medium orchid (#BA55D3): hue 288, bluer, 3.79:1
- Deep pink (#FF1493): hue 328, warmer, 3.64:1
Three of those five sit on exactly the same hue. Violet, magenta, and purple are one color at three lightness levels, which collapses a design system’s purple family into a single definition with a lightness ramp.
Deep pink is the genuine alternative. At 328° it carries real red in the mix, which reads as warmer and sits outside the magenta family proper.
Which Colors Pair Best with Magenta?
Near-black is magenta’s most reliable partner. Deep neutrals let it read as a deliberate brand color rather than as a warning.
Deep magenta from the shade ramp supplies the text layer. #990099 shares the base’s exact hue, passes AAA on white, and covers everything the base can’t.
Teal and deep green sit near the complementary direction with better contrast behavior. A darkened teal reaches AA on white where pure green fails, so it does the interactive work the computed complement can’t.
Warm neutrals prevent the neon register. Cream and warm sand keep magenta reading as premium, while cool grays push it toward a nineties web palette.
The 60-30-10 split applies as follows:
- 60% neutral: white, off-white, or near-black surfaces
- 30% structural color: navigation, links, and secondary fills
- 10% magenta: brand accents, primary CTAs, and highlights
Which Colors Should You Avoid Pairing with Magenta?
Two computed near-clashes cause the most trouble: #FF0095 and #9500FF. Both sit 25° away at identical lightness, offering hue difference with no luminance difference.
Hot pink is the practical trap. Magenta and hot pink sit close enough that placing them together makes the magenta look like a saturated version of the pink rather than a separate color.
Pure green produces the theoretical pairing and a practical problem. The computed complement at #00FF00 sits far brighter in luminance, so the two vibrate against each other and neither carries text on the other.
Red deserves a semantic warning. Magenta near red weakens red’s error meaning, since a user glancing at the screen sees two similar warm-bright colors where only one carries a state.
Does Magenta Meet Accessibility Standards?
Magenta clears the large-text and non-text bars on white and misses AA for body copy at the base value. The 3.14:1 measurement sits above the 3:1 threshold and below the 4.5:1 threshold set by the W3C.
Magenta lands as follows across the common pairings:
- #FF00FF on white: 3.14:1, passes for large text and non-text, fails AA for body
- White on #FF00FF: 3.14:1, large text only
- #BF00BF on white: 5.29:1, passes AA
- #990099 on white: 7.6:1, passes AAA
- #FF33FF on #1D0C1D: 6.39:1, passes AA
That ladder is convenient. Three values in one hue family cover large text, body text, and AAA respectively, so a magenta design system needs no borrowed neutral for its type.
Color vision deficiency treats magenta better than most saturated colors. Under protanopia and deuteranopia it shifts toward blue rather than merging with reds, so it retains separation in a mixed palette.
Tritanopia is the harder case. Blue-yellow deficiency pulls magenta toward red, which collapses its distinction from the pink and red family and matters most in a category system.
How Can You Convert Magenta Between HEX, RGB, HSL, CMYK, and Other Color Formats?
Each format describes the same magenta from a different angle:
- HEX #FF00FF: the default in design files and CSS, shortenable to #F0F
- RGB rgb(255, 0, 255): two channels at maximum, one at zero
- RGBA rgba(255, 0, 255, 1): adds alpha for tinted overlays and hover fills
- HSL hsl(300, 100%, 50%): hue lands on exactly 300°
- HSB 300, 100, 100: the picker model in most design tools
- CMYK 0, 100, 0, 0: a single ink at full coverage
CMYK is where magenta behaves better than almost any screen color. As one of the three process primaries it prints from a single plate at full strength, so the printed result tracks the intent more closely than a mixed color can.
HSL makes the ramp straightforward. Holding hue at 300° and stepping lightness generates violet, magenta, and purple from one definition, which is the token structure described earlier.
The three-character shorthand #F0F is worth knowing for a practical reason. Magenta is a common placeholder and debug color precisely because it’s unmistakable and easy to type, which means a stray #F0F in production usually indicates a missing value rather than a design decision.
Wrapping Up
Magenta is the accessible member of the CMY trio and the one saturated color here that clears 3:1 on white unaided. #FF00FF works for large headings, borders, icons, and buttons with large labels, #BF00BF handles body copy and small white labels at 5.29:1, #990099 reaches AAA, and #FF33FF carries dark mode at 6.39:1.
Those steps don’t need to be mixed by hand. Open Visily and use its AI-powered design tools to generate the magenta tint and shade ladder, accessible light and dark theme values, and matched accent pairings across the entire design in one pass.
