HomeDevMagenta color codes
Color tools

Magenta color codes

Magenta color codes for #FF00FF — HEX, RGB, HSL, HSV, shades, named magentas, and copy-ready CSS.

Loading tool…

Loading Preparing tool…

How to use

Follow these steps for a clear answer.

1

Explore the base color

Review HEX, RGB, HSL, and HSV for magenta, then browse shades, tints, tones, and hues.

2

Pick a variation or named shade

Click a generated strip or a CSS named magenta shade to load codes and harmonies.

3

Copy for CSS

Copy HEX, rgb(), hsl(), or the keyword—and check contrast on white and black.

Color formulas

Core relationships used by this color tool.

CSS magenta#FF00FF = rgb(255, 0, 255) = hsl(300°, 100%, 50%)
Shadesame H/S, lower L (mix toward black)
Tintsame H/S, higher L (mix toward white)
ComplementH + 180° (green)
iHSV (or HSB) keeps hue with saturation and value; HSL uses lightness. Named shades in this family follow CSS Color Module keywords.

Example colors

Common picks with formula and result.

ϟ

Base magenta

CSS keyword

color: magenta;
#FF00FF · rgb(255, 0, 255)
ϟ

Related shade

Family neighbor

fuchsia
#FF00FF
ϟ

UI accent

Background use

background-color: #FF00FF;
Pair with readable text
ϟ

Complement direction

Harmony hint

H + 180°
Toward green

Magenta color family specification

Version 1.0.0

Definition
Magenta in CSS centers on the keyword magenta (#FF00FF / rgb(255, 0, 255) / hsl(300°, 100%, 50%)). Designers use magenta families for bold, playful, and high-energy on screens.
What it calculates
Magenta family variations (shades, tints, tones, hues), named CSS shades, harmony sets, HEX/RGB/HSL/HSV codes, and contrast vs white/black.
Inputs
  • Selected variation chip, named shade, or harmony swatch
  • Section mode (variations, named shades, harmonies)
Outputs
  • HEX, RGB, HSL, HSV
  • Optional CSS keyword
  • Contrast ratios on white and black
Formula
Shades/tints/tones adjust HSL L or S from base H; harmonies offset H on the hue circle

Magenta/fuchsia is a pure print-process primary—great for accents, not long-form text.

For full keyword search across all hues, use HTML color codes. For palette generation, try the color scheme generator or color wheel.

:root {
  --magenta: #ff00ff;
  --magenta-deep: #c71585;
  --magenta-soft: #ee82ee;
}

.banner {
  background-color: var(--magenta);
  color: #ffffff;
}
Popular CSS magentas
NameHEXRGBFeel
magenta#FF00FF255, 0, 255Base keyword
fuchsia#FF00FF255, 0, 255Named shade
deeppink#FF1493255, 20, 147Dark shade
hotpink#FF69B4255, 105, 180Named shade
orchid#DA70D6218, 112, 214Named shade
violet#EE82EE238, 130, 238Named shade
purple#800080128, 0, 128Named shade
mediumvioletred#C71585199, 21, 133Mid tone
blueviolet#8A2BE2138, 43, 226Named shade
darkmagenta#8B008B139, 0, 139Dark shade
darkorchid#9932CC153, 50, 204Dark shade
darkviolet#9400D3148, 0, 211Dark shade
i Related hues may appear in Named shades when useful for magenta-adjacent palettes.
Assumptions
  • Base keyword magenta = #FF00FF in sRGB.
  • Named list uses CSS Color Module keywords in/near the magenta family.
  • Tool runs locally; nothing is uploaded.
Units
  • HEX: #RRGGBB
  • RGB: 0–255
  • HSL/HSV: hue degrees; S/L/V percent
Boundary conditions
  • Lightness/saturation steps stay within visible ranges (~0–100%).
  • Hue offsets wrap modulo 360°.
Example
magenta → #FF00FF; complementary toward green
Validation cases
  • magenta → #FF00FF
  • fuchsia → #FF00FF
  • shade of magenta → same hue, lower lightness
  • tint of magenta → same hue, higher lightness
Sources
  • CSS Color Module named colors (magenta family)
  • Classical shade/tint/tone and hue-harmony geometry
  • WCAG relative-luminance contrast
Calculation version
1.0.0
◉ Pink color codes › ◉ Purple color codes › ◉ Red color codes › # HTML color codes › ◌ Color wheel ›

Frequently asked questions

Key distinctions behind the tool.

What is the hex code for magenta?

The CSS named color magenta is #FF00FF, equal to rgb(255, 0, 255) and hsl(300°, 100%, 50%).

What is the difference between magenta and fuchsia?

Magenta and fuchsia are aliases for the same CSS color (#FF00FF).

What colors go with magenta?

Black, white, and electric lime make magenta pop. Soft neutrals temper it for branding. Always check text contrast.

Is magenta good for body text?

Magenta on white can pass AA but feels loud—prefer deep pinks for body UI.

How do I use magenta in CSS?

Use color: magenta;, color: #FF00FF;, or color: rgb(255, 0, 255); on any property that accepts a <color> value, including background-color and border-color.