Fuchsia Purple

HEX: #CC397B | Modern Palette

On White
4.73:1
PASS
On Black
4.44:1
FAIL

Color Specifications

HEX
#CC397B
RGB
204, 57, 123
HSL
333°, 72% ,80%
CMYK
0, 72.06, 39.71, 20

About Fuchsia Purple

Fuchsia Purple (#CC397B) is a color with RGB(204, 57, 123) and HSL(333.06°, 72.06%, 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 #39CC8A, which creates strong contrast. Its triadic palette includes #7BCC39 and #397BCC. The name comes from Fuchsia (genus name) (Latin (via German and French)).

  • HEX: #CC397B
  • RGB: 204, 57, 123
  • HSL: 333.06°, 72.06%, 80%
  • Mood: Playful, Romantic
  • Style: Warm
  • Use case: Text, Button, Background
  • Complementary color: #39CC8A
  • Triadic colors: #7BCC39, #397BCC
  • The name comes from Fuchsia (genus name) (Latin (via German and French)).

Live Components

LIGHT
DARK
System Notification Box

Color Palettes

Fuchsia Purple #CC397B is used in Monochromatic, Neutral + Accent, Analogous, 3 + 1 + 1 palettes, giving designers ready-made combinations for backgrounds, surfaces, accents, and interface elements.

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

Color Harmonies

Fuchsia Purple #CC397B pairs with #39CC8A as its complementary color, and #7BCC39 and #397BCC in triadic combinations. These harmony relationships help create balanced color combinations for UI, branding, and design work.

Complementary

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

FUCHSIA PURPLE
Analogous

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

FUCHSIA PURPLE
Triadic

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

FUCHSIA PURPLE
Split-Complementary

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

FUCHSIA PURPLE
Tetradic (Square)

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

FUCHSIA PURPLE
Monochromatic

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

FUCHSIA PURPLE

Shades & Tints

The shade and tint range for Fuchsia Purple #CC397B moves from dark #14050C tones through the base color to lighter #FAEBF1 tones, making it useful for depth, hierarchy, and background variation.

FUCHSIA PURPLE

Color Characteristics

Mood
Playful Romantic
Style
Warm
Use case
Text Button Background

Accessibility Simulation

Deuteranopia #7D7D77
Protanopia #5A5A7C
Tritanopia #C94646
Achromatopsia #737373

Frequently Asked Questions

Fuchsia Purple (#CC397B) is a color with RGB(204, 57, 123) and HSL(333.06°, 72.06%, 80%).

#CC397B pairs strongly with #39CC8A as its complementary color. It can also be used with neutral tones for balanced UI and design layouts.

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

#CC397B is commonly associated with Playful, Romantic.

The name Fuchsia Purple is linked to Fuchsia (genus name) from Latin (via German and French), meaning Named after Leonhart Fuchs, a German botanist.

Name, History & Etymology

Origin Word Fuchsia (genus name)
Meaning Named after Leonhart Fuchs, a German botanist
Language Latin (via German and French)
First Recorded Use 18th Century (for the plant), 19th Century (for the color)

History

The color 'fuchsia' is directly derived from the vibrant flowers of the Fuchsia plant. While the plant itself was discovered and named in the early 18th century, the color term became prominent much later. The development of synthetic dyes in the mid-19th century, especially fuchsine (also known as magenta), played a significant role in popularizing and standardizing this specific hue in fashion and art. 'Fuchsia Purple' specifically emphasizes the purple undertones often present in many fuchsia varieties, distinguishing it slightly from a pure 'fuchsia' which can sometimes lean more pink.

First Recorded Use

The plant genus 'Fuchsia' was named in 1703 by Charles Plumier. The color 'fuchsia' as a specific shade of purple-pink gained popularity and common usage in the mid-19th century, particularly after the introduction of synthetic aniline dyes like fuchsine (magenta) in 1859, which closely resembled the flower's color.

Cultural Associations

Fuchsia is often associated with vibrancy, energy, playfulness, and exoticism due to the plant's tropical origins and striking appearance. In fashion, it's considered a bold and confident color. It can also evoke feelings of creativity and individuality. Its strong visual impact makes it a popular choice for accents and statement pieces.

Similar Named Colors
Telemagenta #CF3476 ΔE 1.37
Magenta (Pantone) #D0417E ΔE 1.91
Fuchsia Rose #C74375 ΔE 2.40
Smitten #C84186 ΔE 2.75

Code Snippets

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

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

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

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

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

// SCSS variable
$fuchsia-purple: #CC397B;

// With RGB channels (useful for rgba() usage)
$fuchsia-purple-r: 204;
$fuchsia-purple-g: 57;
$fuchsia-purple-b: 123;

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