Skip to content
ColorPlum

Colors · value from the CSS Color Module Level 4 (W3C)

Magenta color: hex code #FF00FF, RGB and palettes

Magenta is #FF00FF (RGB 255, 0, 255), the CSS named color, identical to fuchsia: full red and blue with no green. Black text on it measures 6.69:1, while white is only 3.13:1.

By Paul Gunder. Every value is computed from published standards; see how ColorPlum works.

Updated

ColorPlum swatchMagentamedium, vivid magenta
HEX
#FF00FF
RGB
rgb(255, 0, 255)
HSL
hsl(300, 100%, 50%)

Best text on it: black at 6.69:1

Copy codes as
Build a paletteMake a gradientCheck contrastWallpaper

Every code for Magenta

  • HEX#FF00FF
  • RGBrgb(255, 0, 255)
  • HSLhsl(300, 100%, 50%)
  • HSV300°, 100%, 100%
  • CMYK0%, 100%, 0%, 0%
  • Lablab(60.2% 93.5 -60.5)
  • OKLCHoklch(70.2% 0.322 328.4)
  • Decimal16711935

Tints, shades and tones

From white to black in 10% steps, with Magenta in the middle. Tap a code to copy it.

  1. 90%#FFE6FF
  2. 80%#FFCCFF
  3. 70%#FFB3FF
  4. 60%#FF99FF
  5. 50%#FF80FF
  6. 40%#FF66FF
  7. 30%#FF4DFF
  8. 20%#FF33FF
  9. 10%#FF1AFF
  10. Base#FF00FF
  11. 10%#E600E6
  12. 20%#CC00CC
  13. 30%#B300B3
  14. 40%#990099
  15. 50%#800080
  16. 60%#660066
  17. 70%#4D004D
  18. 80%#330033
  19. 90%#1A001A

Tones (mixed with gray)

  1. 10%#F20DF2
  2. 20%#E61AE6
  3. 30%#D926D9
  4. 40%#CC33CC
  5. 50%#C040C0
  6. 60%#B34DB3
  7. 70%#A65AA6
  8. 80%#996699
  9. 90%#8D738D

Matching colors

Complementary
Analogous
Triadic
Split complementary
Tetradic (square)
Monochromatic
  • #660066
  • #B300B3
  • #FF00FF
  • #FF4DFF
  • #FF99FF

Magenta in 3D color space

OKLab, the space ColorPlum does its math in: lightness runs up the pole, hue goes around it and saturation grows outward. The faint shell is every color a screen can show (saturation is drawn wider than lightness so hues separate). Drag to turn it.

Magenta with its complement, its triad and its tint and shade
  • Magenta
  • Triad #FFFF00
  • Triad #00FFFF
  • Complement
  • 50% tint
  • 50% shade

Magenta in use

New collectionAutumn edit

Card body text stays dark for reading; magenta carries the header and the button.

Shop nowTag

Headline in Magenta

A paragraph with a link in dark text, because this color is too light for text on white; use it for fills instead.

How it looks with color-vision deficiency

A simulation (Machado and colleagues, 2009) of how the color and its complement read without one type of cone.

  • Typical color vision#FF00FF
  • Protanopia (no red cones)#007FFF
  • Deuteranopia (no green cones)#689BFA
  • Tritanopia (no blue cones)#FF4A97

Contrast and readability

PairingRatioWCAG 2.2
as text on white3.13:1AA AA large AAA
as text on black6.69:1AA AA large AAA
white text on it3.13:1AA AA large AAA
black text on it6.69:1AA AA large AAA
on your background2.73:1AA AA large AAA

Export

:root {
  --magenta: #ff00ff;
  --magenta-rgb: 255 0 255;
  --magenta-on: #000000;
}
On this page

Magenta on the web is exactly the screen's strongest mix of red and blue light: #FF00FF. In CSS it has two names, magenta and fuchsia, which are the same color, so the two keywords can be swapped freely. The word is usually linked to a dye that was named after the Battle of Magenta in Italy.

The two magentas

The RGB values are 255, 0, 255, with no green. In HSL it is hue 300°, 100% saturation and 50% lightness, the exact midpoint between red and blue on the wheel. CMYK reads 0%, 100%, 0%, 0%, which is the printing ink named magenta, though a real magenta ink is duller than this glowing screen color. The decimal value is 16711935.

There is a second meaning to watch. In the xkcd survey, the color people called "magenta" was #C20078, a deeper pink-purple that sits 22.7 apart from the CSS one in OKLab, which is a very large gap. The survey's closest names to the CSS value are "bright magenta" (#FF08E8, 3.4 away) and "pink/purple" (#EF1DE7, 4.4). Among other CSS names, orchid and mediumorchid are both about 14 away. So if a client says "magenta", check whether they mean the neon screen color or the darker survey one.

Using it with text

Magenta is bright enough to be tiring in big areas, so it works best as an accent.

  • Black on magenta: 6.69:1, a pass at AA, and close to AAA's 7:1.
  • White on magenta: 3.13:1, enough only for large headings.
  • Magenta as text: on white, also 3.13:1. On black, 6.69:1.
  • Darker steps: the shade #800080 with white text gives 9.41:1, and #660066 gives 11.95:1.

The complement is pure green, #00FF00, a harsh vibrating pair that is better kept thin. Triadic partners are yellow (#FFFF00) and cyan (#00FFFF). Analogous colors are violet (#8000FF) and a hot pink (#FF0080).

Worked example

You are making a poster for a charity fun run with the theme "Run in color". Start with a near-black purple, #330033, as the background and set the headline in magenta, which reaches 5.63:1 against it. The date and place go in white. The sign-up box uses the palest tint, #FFE6FF, as fill with the dark shade #660066 as text, which measures 10.25:1. Skip white lettering on a solid magenta band, because it only measures 3.13:1; use black or switch to #990099, where white reaches 7.46:1.

For a deeper purple-pink compare neon purple, and for a softer shade look at lavender. The color wheel shows where magenta sits between red and blue.

Sources

  1. W3C, CSS Color Module Level 4: named colors (checked 2026-11-10) w3.org
  2. xkcd, Color survey results: the 954 most common color names (Randall Munroe, 2010; checked 2026-11-10) xkcd.com
  3. W3C, Web Content Accessibility Guidelines (WCAG) 2.2: contrast minimum (checked 2026-11-10) w3.org