Magenta (Pantone)

HEX: #D0417E | Modern Palette

On White
4.43:1
FAIL
On Black
4.74:1
PASS

Color Specifications

HEX
#D0417E
RGB
208, 65, 126
HSL
334°, 68% ,81%
CMYK
0, 68.75, 39.42, 18.43

About Magenta (Pantone)

Magenta (Pantone) (#D0417E) is a color with RGB(208, 65, 126) and HSL(334.41°, 68.75%, 81.57%). It is commonly associated with Playful moods. In design, it fits Warm styles and is suitable for Text, Button, Background. Its complementary color is #41D093, which creates strong contrast. Its triadic palette includes #7ED041 and #417ED0. The name comes from Magenta (Italian).

  • HEX: #D0417E
  • RGB: 208, 65, 126
  • HSL: 334.41°, 68.75%, 81.57%
  • Mood: Playful
  • Style: Warm
  • Use case: Text, Button, Background
  • Complementary color: #41D093
  • Triadic colors: #7ED041, #417ED0
  • The name comes from Magenta (Italian).

Live Components

LIGHT
DARK
System Notification Box

Color Palettes

Monochromatic Five tones of the same hue — a reliable scale for backgrounds, surfaces, and text.
Neutral + Accent Four near-neutral tones grounded by a saturated accent — clean and versatile for UI.
Analogous Five hues drifting across a 60° arc — naturally harmonious and pleasing to the eye.
3 + 1 + 1 Three analogous base colors, one complementary accent, one dark anchor — bold yet balanced.

Color Harmonies

Complementary

The color directly opposite on the color wheel — creates maximum contrast and vibrance.

Analogous

Colors adjacent on the wheel — naturally harmonious and pleasing to the eye.

Triadic

Three colors equally spaced 120° apart — bold, balanced, and visually rich.

Split-Complementary

Two colors flanking the complement — high contrast with less tension than full complementary.

Tetradic (Square)

Four colors at 90° intervals — rich variety, best when one color dominates.

Monochromatic

Shades and tints of the same hue — cohesive, elegant, and easy to work with.

Shades & Tints

A seamless scale of #D0417E from deepest shade to lightest tint.

Color Characteristics

Mood
Playful
Style
Warm
Use case
Text Button Background

Accessibility Simulation

Deuteranopia #81817A
Protanopia #60607F
Tritanopia #CD4C4C
Achromatopsia #787878

Frequently Asked Questions

Magenta (Pantone) (#D0417E) is a color with RGB(208, 65, 126) and HSL(334.41°, 68.75%, 81.57%).

#D0417E pairs strongly with #41D093 as its complementary color. It can also be used with neutral tones for balanced UI and design layouts.

#D0417E is suitable for Text, Button, Background and works well with Warm styles.

#D0417E is commonly associated with Playful.

The name Magenta (Pantone) is linked to Magenta from Italian, meaning Named after the Battle of Magenta.

Name, History & Etymology

Origin Word Magenta
Meaning Named after the Battle of Magenta
Language Italian
First Recorded Use Mid-19th Century

History

The color magenta was named in 1859 after the Battle of Magenta, which took place near the town of Magenta in Italy. This was also the year that a new aniline dye, fuchsine, was patented, which produced a vibrant purplish-red color. The dye was subsequently renamed 'magenta' to capitalize on the recent victory. It quickly became a popular color in fashion and art.

First Recorded Use

1859

Cultural Associations

Magenta is a color that sits between red and blue on the color wheel, often perceived as a purplish-red or reddish-purple. It is not a spectral color, meaning it does not have its own wavelength of light but is rather an extra-spectral color perceived by the brain when the eye detects strong signals from both red and blue cones, with little or no green. In various cultures, magenta can symbolize passion, creativity, innovation, and sometimes rebellion or non-conformity. It is also a significant color in CMYK printing (Cyan, Magenta, Yellow, Key/Black) as one of the primary subtractive colors.

Similar Named Colors
Fuchsia Purple #CC397B ΔE 1.91
Telemagenta #CF3476 ΔE 2.38
Fuchsia Rose #C74375 ΔE 2.38
Ruber #CE4676 ΔE 2.48

Code Snippets

/* Background */
.element {
    background-color: #D0417E;
}

/* Text */
.element {
    color: #D0417E;
}

/* Border */
.element {
    border: 1px solid #D0417E;
}

/* Linear gradient to complementary */
.element {
    background: linear-gradient(
        to right,
        #D0417E,
        #B0F0D5
    );
}

/* Radial gradient */
.element {
    background: radial-gradient(
        circle,
        #D0417E,
        #B0F0D5
    );
}

// SCSS variable
$magenta-(pantone): #D0417E;

// With RGB channels (useful for rgba() usage)
$magenta-(pantone)-r: 208;
$magenta-(pantone)-g: 65;
$magenta-(pantone)-b: 126;

// Usage
.element {
    background-color: $magenta-(pantone);
    color: rgba($magenta-(pantone)-r, $magenta-(pantone)-g, $magenta-(pantone)-b, 0.8);
}