Rebecca Purple

HEX: #663399 | Modern Palette

On White
8.41:1
PASS
On Black
2.50:1
FAIL

Color Specifications

HEX
#663399
RGB
102, 51, 153
HSL
270°, 66% ,60%
CMYK
33.33, 66.67, 0, 40

About Rebecca Purple

Rebecca Purple (#663399) is a color with RGB(102, 51, 153) and HSL(270°, 66.67%, 60%). It is commonly associated with Playful, Romantic moods. In design, it is suitable for Text, Button, Accent. Its complementary color is #669933, which creates strong contrast. Its triadic palette includes #996633 and #339966. The name comes from Rebecca Purple (English).

  • HEX: #663399
  • RGB: 102, 51, 153
  • HSL: 270°, 66.67%, 60%
  • Mood: Playful, Romantic
  • Use case: Text, Button, Accent
  • Complementary color: #669933
  • Triadic colors: #996633, #339966
  • The name comes from Rebecca Purple (English).

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 #663399 from deepest shade to lightest tint.

Color Characteristics

Mood
Playful Romantic
Style
Use case
Text Button Accent

Accessibility Simulation

Deuteranopia #464699
Protanopia #3B3B99
Tritanopia #574A4A
Achromatopsia #4D4D4D

Frequently Asked Questions

Rebecca Purple (#663399) is a color with RGB(102, 51, 153) and HSL(270°, 66.67%, 60%).

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

#663399 is suitable for Text, Button, Accent.

#663399 is commonly associated with Playful, Romantic.

The name Rebecca Purple is linked to Rebecca Purple from English, meaning A shade of purple named in memory of Rebecca Meyer..

Name, History & Etymology

Origin Word Rebecca Purple
Meaning A shade of purple named in memory of Rebecca Meyer.
Language English
First Recorded Use 21st Century

History

Rebecca Purple is a specific shade of purple (#663399) that was added to the CSS Color Module Level 4 specification. It was named by Eric Meyer in memory of his daughter, Rebecca Meyer, who passed away in June 2014 at the age of six. The color was proposed and quickly adopted by the web standards community as a tribute. It is a unique case of a color being added to a web standard with such a personal and poignant origin.

First Recorded Use

June 2014

Cultural Associations

Within the web development and design community, Rebecca Purple holds significant emotional weight. It serves as a subtle, yet powerful, reminder of the human element behind technology and standards. Its adoption was a gesture of solidarity and respect for Eric Meyer, a highly influential figure in web standards and CSS. It's often referenced in discussions about web history and community support.

Similar Named Colors
Purple Heart #69359C ΔE 0.80
Grape #6F2DA8 ΔE 2.86
Blue-magenta Violet #553592 ΔE 3.44
Eminence #6C3082 ΔE 5.11

Code Snippets

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

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

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

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

/* Radial gradient */
.element {
    background: radial-gradient(
        circle,
        #663399,
        #99DD55
    );
}

// SCSS variable
$rebecca-purple: #663399;

// With RGB channels (useful for rgba() usage)
$rebecca-purple-r: 102;
$rebecca-purple-g: 51;
$rebecca-purple-b: 153;

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