Color guide · Purple colors

Rebecca Purple Color

Rebecca purple is a medium-dark purple with a clear CSS keyword. It makes a useful bridge between deep indigo and pale lavender. It can support an expressive brand accent without requiring a custom hex value in every stylesheet.

A balanced purple with a specific web identity#663399CSS keyword: rebeccapurple

Rebecca Purple color codes

HEX#663399
RGBrgb(102, 51, 153)
HSLhsl(270, 50%, 40%)
CSS keywordrebeccapurple

RGB values use the 0–255 scale. HSL values are rounded to one decimal place for display. CSS Color: named colors ↗

The name & the reference

What makes rebecca purple interesting?

The CSS Color specification includes rebeccapurple. Eric Meyer recounts how the name commemorates his daughter Rebecca, and records the CSS Working Group’s approval in 2014. It is a named web color with a particular context, rather than a name derived from a mineral or flower. Keep that context separate from invented claims about universal emotional effects.

Read the reference: Eric Meyer: the story of rebeccapurple ↗

Things with rebecca purple tones

These illustrated references explore a color family. Objects vary; none is a claim of an exact #663399 match.

Illustrated placeholder · image coming later

Purple fabric

A dyed fabric is a visual analogy for this palette, not the origin of the CSS name.

Illustrated placeholder · image coming later

Violet decorative stone

Faceted purple illustrations need both pale highlights and deeper shadow colors.

Illustrated placeholder · image coming later

Purple flower details

A purple flower can inspire a companion shade without matching this exact digital anchor.

A practical color study

A useful three-value purple ladder

Rebecca purple sits naturally between pale lavender and deep indigo. Use those values to separate light, middle and dark roles in a small sprite or interface. A brighter gold accent should remain limited so the purple structure still reads clearly.

The name has a specific commemorative web history. Design suggestions on this page describe practical combinations; they do not assign a universal emotion to that history or to everyone seeing the hue.

Ideas for using rebecca purple

01

Web interfaces

Use it for a selected tab or a brand accent. Check the selected text pair and provide an additional active-state cue.

02

Game art

Combine the midtone purple with lavender highlights and indigo shadows for a small fantasy prop.

03

Branding

Try a purple headline with cream surroundings and one gold detail. Test the same composition without color to check hierarchy.

Watch out: Equal-strength purple and blue accents can fight for attention. Give one the primary role and use the other sparingly.

Tints, shades & companion hues

These tints and shades are simple sRGB channel mixes with white or black. They are useful starting points, not perceptually equal steps or guaranteed accessible pairs. Select a swatch to copy its hex code.

Hue companions

Calculated in HSL with the same saturation and lightness. Complementary and analogous colors suggest hue relationships; they do not promise contrast.

Palettes featuring rebecca purple

Lavender Night

A clear purple light-to-dark ladder

Explore palette →

See the palette at work

Palette preview studio

Compare two colors →

Try a website, a game scene, a poster or a room. Pick a role, then select a swatch to repaint it. These are schematic design previews, not rendered materials or a game engine.

Text is automatically chosen as black or white for opaque preview surfaces. This does not certify your exported palette for every use.

Color & craftStories · Studio
A thoughtful starting point

Make something worth exploring.

A clear reading surface, one useful accent and room for the details.

Explore the collection →
Design notesNew ideasSmall details

Try it in context

Live design & contrast preview

Change the surface and text independently. The text result uses opaque sRGB colors; it does not evaluate your entire page.

8.41:1 · AAA normal text

AA normal text needs 4.5:1; AA large text needs 3:1. Large text means at least 18 pt, or 14 pt bold. Ratios are assessed before rounding. This is a text check, not a complete accessibility audit. W3C: understanding text contrast ↗

A little color goes a long way

Your next good idea

Try a readable heading, a short paragraph and a clear action on this surface.

Example action →Static design sample · use the controls to change it

Compare rebecca purple with another color →

Questions about rebecca purple

Can I write rebeccapurple directly in CSS?

Yes. It is a standardized CSS named color equivalent to #663399.

Will this look the same in print?

No exact print match is promised. Paper, ink, color profiles and lighting affect the result. Use a physical proof when a precise material match matters.

Can I use these codes in a website or game?

Yes. Copy the exact code, give it a clear role in your palette and test text contrast. Add labels or shapes when color communicates important information.

Keep exploring

Explore purple colors →

#FFD700
Warm colors

Gold

A clear yellow for highlights and celebration

Explore color →
#4B0082
Purple colors

Indigo

A deep violet-blue for strong dark surfaces

Explore color →
#E6E6FA
Purple colors

Lavender

A very pale violet for spacious backgrounds

Explore color →

A color name is a starting point

Digital codes describe sRGB colors. Natural objects, paint, ink and screens can look different under different lighting or calibration. Visual references illustrate color families rather than exact measured matches. Placeholder illustrations are clearly labeled. Design ideas are suggestions, not universal claims about emotion or culture.

Pick colors from an image · Convert a color · Check a complete text pair · Suggest a color guide