Magenta-pink
HEX: #CC338B | Modern Palette
Color Specifications
#CC338B
204, 51, 139
325°, 75% ,80%
0, 75, 31.86, 20
About Magenta-pink
Magenta-pink (#CC338B) is a color with RGB(204, 51, 139) and HSL(325.49°, 75%, 80%). It is commonly associated with Playful, Romantic moods. In design, it fits Warm styles and is suitable for Text, Button, Background. Its complementary color is #33CC74, which creates strong contrast. Its triadic palette includes #8BCC33 and #338BCC. The name comes from Magenta-pink (English (descriptive compound)).
- HEX: #CC338B
- RGB: 204, 51, 139
- HSL: 325.49°, 75%, 80%
- Mood: Playful, Romantic
- Style: Warm
- Use case: Text, Button, Background
- Complementary color: #33CC74
- Triadic colors: #8BCC33, #338BCC
- The name comes from Magenta-pink (English (descriptive compound)).
Live Components
Color Palettes
Magenta-pink #CC338B is used in Monochromatic, Neutral + Accent, Analogous, 3 + 1 + 1 palettes, giving designers ready-made combinations for backgrounds, surfaces, accents, and interface elements.
Color Harmonies
Magenta-pink #CC338B pairs with #33CC74 as its complementary color, and #8BCC33 and #338BCC in triadic combinations. These harmony relationships help create balanced color combinations for UI, branding, and design work.
Frequently Asked Questions
Name, History & Etymology
History
Magenta itself was named after the Battle of Magenta in 1859, coinciding with the discovery of the fuchsine dye that produced this color. Pink has a much older history, deriving from the flower. The compound 'magenta-pink' represents a common linguistic strategy to describe intermediate or blended colors by combining two known color terms. It serves to differentiate it from a pure magenta (which can be more purplish-red) and a pure pink (which is typically lighter and less saturated). The specific hex code #cc338b places it firmly in this blended territory, being a vibrant, deep pink with strong magenta undertones.
First Recorded Use
While 'magenta' and 'pink' have older origins, the compound 'magenta-pink' as a precise color descriptor likely emerged as color naming became more nuanced, particularly with the advent of synthetic dyes and more precise color classification in fashion, art, and printing. Specific documented first uses are hard to pinpoint for such descriptive compounds, but its usage would have solidified in the late 19th to early 20th century.
Cultural Associations
This color, like magenta and pink, often carries associations of vibrancy, femininity, playfulness, and sometimes boldness. It's frequently seen in fashion, cosmetics, and design where a striking yet approachable color is desired. It can evoke feelings of romance, energy, and creativity. In some contexts, it might be associated with 'girly' aesthetics, but its depth also allows for more sophisticated applications.
Code Snippets
/* Background */
.element {
background-color: #CC338B;
}
/* Text */
.element {
color: #CC338B;
}
/* Border */
.element {
border: 1px solid #CC338B;
}/* Linear gradient to complementary */
.element {
background: linear-gradient(
to right,
#CC338B,
#A6F2C6
);
}
/* Radial gradient */
.element {
background: radial-gradient(
circle,
#CC338B,
#A6F2C6
);
}// SCSS variable
$magenta-pink: #CC338B;
// With RGB channels (useful for rgba() usage)
$magenta-pink-r: 204;
$magenta-pink-g: 51;
$magenta-pink-b: 139;
// Usage
.element {
background-color: $magenta-pink;
color: rgba($magenta-pink-r, $magenta-pink-g, $magenta-pink-b, 0.8);
}