Magenta (dye)

HEX: #CA1F7B | Modern Palette

On White
5.26:1
PASS
On Black
3.99:1
FAIL

Color Specifications

HEX
#CA1F7B
RGB
202, 31, 123
HSL
327°, 84% ,79%
CMYK
0, 84.65, 39.11, 20.78

About Magenta (dye)

Magenta (dye) (#CA1F7B) is a color with RGB(202, 31, 123) and HSL(327.72°, 84.65%, 79.22%). It is commonly associated with Bold, Playful moods. In design, it fits Warm styles and is suitable for Text, Button, Accent. Its complementary color is #1FCA6E, which creates strong contrast. Its triadic palette includes #7BCA1F and #1F7BCA. The name comes from Magenta (Italian).

  • HEX: #CA1F7B
  • RGB: 202, 31, 123
  • HSL: 327.72°, 84.65%, 79.22%
  • Mood: Bold, Playful
  • Style: Warm
  • Use case: Text, Button, Accent
  • Complementary color: #1FCA6E
  • Triadic colors: #7BCA1F, #1F7BCA
  • 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 #CA1F7B from deepest shade to lightest tint.

Color Characteristics

Mood
Bold Playful
Style
Warm
Use case
Text Button Accent

Accessibility Simulation

Deuteranopia #767677
Protanopia #4E4E7C
Tritanopia #C63636
Achromatopsia #6C6C6C

Frequently Asked Questions

Magenta (dye) (#CA1F7B) is a color with RGB(202, 31, 123) and HSL(327.72°, 84.65%, 79.22%).

#CA1F7B pairs strongly with #1FCA6E as its complementary color. It can also be used with neutral tones for balanced UI and design layouts.

#CA1F7B is suitable for Text, Button, Accent and works well with Warm styles.

#CA1F7B is commonly associated with Bold, Playful.

The name Magenta (dye) is linked to Magenta from Italian, meaning A town in Italy.

Name, History & Etymology

Origin Word Magenta
Meaning A town in Italy
Language Italian
First Recorded Use 19th Century

History

Magenta dye was discovered in 1859 by François-Emmanuel Verguin. It was originally named 'fuchsine' due to its color resemblance to the flowers of the fuchsia plant. However, it was quickly renamed 'magenta' to commemorate the Battle of Magenta, which took place near the Italian town of Magenta in the same year. This battle was a significant victory for the French and Sardinian forces against the Austrian Empire. The dye's vibrant, purplish-red hue quickly gained popularity in the textile industry.

First Recorded Use

1859

Cultural Associations

Magenta became a very fashionable color in the late 19th century, particularly in women's clothing and accessories. Its striking appearance made it a symbol of modernity and luxury. It is also one of the three primary colors in the CMYK color model (Cyan, Magenta, Yellow, Key/Black) used in color printing, making it fundamental to modern graphic arts and printing processes. In some contexts, magenta is associated with creativity, innovation, and passion.

Similar Named Colors
Red Violet #C71585 ΔE 2.99
Vivid Cerise #DA1D81 ΔE 3.32
Magenta-pink #CC338B ΔE 3.65
Fuchsia Purple #CC397B ΔE 3.72

Code Snippets

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

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

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

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

/* Radial gradient */
.element {
    background: radial-gradient(
        circle,
        #CA1F7B,
        #9DF7C7
    );
}

// SCSS variable
$magenta-(dye): #CA1F7B;

// With RGB channels (useful for rgba() usage)
$magenta-(dye)-r: 202;
$magenta-(dye)-g: 31;
$magenta-(dye)-b: 123;

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