Rebecca Purple Color (#663399)

#663399rgb(102, 51, 153)

Rebecca Purple is a CSS named color defined as hex code #663399. Rebecca Purple is a strong, medium-dark purple. It was added to CSS Color Level 4 in 2014 in memory of Rebecca Meyer, the daughter of web standards author Eric Meyer.

Color Overview & Formats

CSS: rebeccapurpleLuminance: 0.0749
HEX
#663399
RGB
rgb(102, 51, 153)
HSL
hsl(270, 50%, 40%)
Rebecca Purple (#663399) Color Format Conversions
FormatSyntax / ValuesNotesAction
HEX#6633996-digit hex web code
RGBrgb(102, 51, 153)Red, Green, Blue channels (0-255)
HSLhsl(270, 50%, 40%)Hue (270°), Saturation (50%), Lightness (40%)
HSV / HSBhsv(270, 67%, 60%)Hue, Saturation (67%), Value/Brightness (60%)
CMYKcmyk(33%, 67%, 0%, 40%)Digital mathematical approximation (non-print)
OKLCHoklch(0.440 0.160 303.4)Perceptually uniform color space (CSS Color 4 approximation)
CSS Implementation & Quick Steps
background-color: #663399; /* or rebeccapurple */
  1. Select color format: Choose the desired format (HEX #663399, RGB, or HSL).
  2. Copy the code: Click the copy button or press Tab+Enter to store in clipboard.
  3. Pair with white text: White text on Rebecca Purple reaches 8.41:1 (WCAG AAA).

What Colors Go With Rebecca Purple?

These 6 colors all go well with Rebecca Purple (#663399), and each one is a standard CSS named color. The ratio is the WCAG 2.2 contrast of that color on Rebecca Purple: at 4.5:1 or above it works for text; below that, use it for backgrounds and accents.

White

#FFFFFF
8.41:1Text-safe

The natural text color on rebecca purple.

Gold

#FFD700
5.99:1Text-safe

A warm, royal accent for headings and icons.

Lavender

#E6E6FA
6.83:1Text-safe

A pale tonal partner for backgrounds and text.

Pink

#FFC0CB
5.47:1Text-safe

A soft, playful contrast for friendly brands.

Yellow

#FFFF00
7.83:1Text-safe

A high-energy complement for bold, graphic designs.

Silver

#C0C0C0
4.62:1Text-safe

A cool neutral for secondary text and dividers.

Harmonious Palettes & Tints

The palettes below are algorithmically generated across standard intervals based on Rebecca Purple (HSL 270°). Each group offers full palette copy and live preview:

Complementary Harmony

Hue rotated 180 degrees on the HSL wheel (270° to 90°), keeping the original saturation and lightness.

Rebecca Purple
#663399
Complement (90°)
#669933
Live UI Component Mockup
Component Header SampleWhite text on Rebecca Purple: 8.41:1 (WCAG AAA).
Button style preview

Analogous Harmony

Hues 30 degrees either side (240° and 300°), keeping the original saturation and lightness.

Analogous (240°)
#333399
Rebecca Purple
#663399
Analogous (300°)
#993399
Live UI Component Mockup
Component Header SampleWhite text on Rebecca Purple: 8.41:1 (WCAG AAA).
Button style preview

Triadic Harmony

Hues spaced evenly by 120 degrees (30° and 150°), keeping the original saturation and lightness.

Rebecca Purple
#663399
Triadic (30°)
#996633
Triadic (150°)
#339966
Live UI Component Mockup
Component Header SampleWhite text on Rebecca Purple: 8.41:1 (WCAG AAA).
Button style preview

Tints & Shades

Mixed with white (tints) and black (shades) in sRGB at 60% and 30%.

Tint 60%
#C2ADD6
Tint 30%
#9470B8
Rebecca Purple
#663399
Shade 30%
#47246B
Shade 60%
#29143D
Live UI Component Mockup
Component Header SampleWhite text on Rebecca Purple: 8.41:1 (WCAG AAA).
Button style preview

WCAG 2.2 Text Readability & Contrast Check

Under WCAG 2.2 criteria, regular body text requires at least 4.5:1 (AA) and large text requires at least 3.0:1. The table below displays calculated contrast ratios:

Text Contrast Ratios on Rebecca Purple (#663399)
Foreground ColorContrast RatioNormal Text (AA)Large Text (AA)Normal Text AAA (>= 7.0:1)
Pure Black (#000000)
2.50:1FailFailFail
Pure White (#FFFFFF)
8.41:1PassPassPass
Dark Charcoal (#212529)
1.84:1FailFailFail
Mid Gray (#666666)
1.46:1FailFailFail

Interactive Contrast Tester

Enter text foreground and background colors to verify WCAG legibility:

Calculated Ratio:
8.41:1
Normal: Pass AAALarge: Pass AAA
Large Heading Sample (18pt Bold)

This is sample body text rendered directly to verify contrast and readability.

Rebecca Purple Background Download

Download standard 1920x1080 solid desktop wallpaper or generate mobile wallpaper:

Rebecca Purple 1920x1080 solid color background wallpaper previewStandard Wallpaper: 1920x1080 PNG (#663399)

Download Options

All wallpaper files precisely match the W3C standard color value:

Download 1920x1080 PNG

CSS Standard & Usage Notes

rebeccapurple = #663399 (rgb(102, 51, 153))
W3C CSS Color 4

UI Design & Accessibility Guidelines

Use it for buttons, links, headings and brand colors that need a confident purple. On Rebecca Purple, white text passes WCAG AAA at every size (8.41:1); black text fails even for large text (2.5:1).

Published: · Modified: · Editorial: SwatchAtlas Editorial Team

Frequently Asked Questions (FAQ)

Can I use black text on Rebecca Purple?

No. Black text on Rebecca Purple has a WCAG 2.2 contrast ratio of only 2.5:1, below the 3:1 minimum even for large text.

Can I use white text on Rebecca Purple?

Yes. White text on Rebecca Purple has a WCAG 2.2 contrast ratio of 8.41:1, passing both AA (4.5:1) and AAA (7:1) at every text size.

What colors go with Rebecca Purple?

White, Gold, Lavender, Pink, Yellow and Silver all go well with Rebecca Purple. White (8.41:1), Gold (5.99:1), Lavender (6.83:1), Pink (5.47:1), Yellow (7.83:1) and Silver (4.62:1) have enough contrast for text on Rebecca Purple.

Why is it called Rebecca Purple?

It was added to CSS in 2014 in memory of Rebecca Meyer, who died at age six. Its value is #663399, and the name rebeccapurple works in any modern browser.