HomeDevPurple color codes
Color tools

Purple color codes

Purple color codes for #800080 — HEX, RGB, HSL, HSV, shades, named purples, and copy-ready CSS.

Loading tool…

Loading Preparing tool…

How to use

Follow these steps for a clear answer.

1

Explore the base color

Review HEX, RGB, HSL, and HSV for purple, then browse shades, tints, tones, and hues.

2

Pick a variation or named shade

Click a generated strip or a CSS named purple shade to load codes and harmonies.

3

Copy for CSS

Copy HEX, rgb(), hsl(), or the keyword—and check contrast on white and black.

Color formulas

Core relationships used by this color tool.

CSS purple#800080 = rgb(128, 0, 128) = hsl(300°, 100%, 25%)
Shadesame H/S, lower L (mix toward black)
Tintsame H/S, higher L (mix toward white)
ComplementH + 180° (yellow-green/lime)
iHSV (or HSB) keeps hue with saturation and value; HSL uses lightness. Named shades in this family follow CSS Color Module keywords.

Example colors

Common picks with formula and result.

ϟ

Base purple

CSS keyword

color: purple;
#800080 · rgb(128, 0, 128)
ϟ

Related shade

Family neighbor

rebeccapurple
#663399
ϟ

UI accent

Background use

background-color: #800080;
Pair with readable text
ϟ

Complement direction

Harmony hint

H + 180°
Toward yellow-green/lime

Purple color family specification

Version 1.0.0

Definition
Purple in CSS centers on the keyword purple (#800080 / rgb(128, 0, 128) / hsl(300°, 100%, 25%)). Designers use purple families for creativity, luxury, and mystery on screens.
What it calculates
Purple family variations (shades, tints, tones, hues), named CSS shades, harmony sets, HEX/RGB/HSL/HSV codes, and contrast vs white/black.
Inputs
  • Selected variation chip, named shade, or harmony swatch
  • Section mode (variations, named shades, harmonies)
Outputs
  • HEX, RGB, HSL, HSV
  • Optional CSS keyword
  • Contrast ratios on white and black
Formula
Shades/tints/tones adjust HSL L or S from base H; harmonies offset H on the hue circle

Purple suggests creativity and premium brands. Use lighter lavenders for backgrounds and deeper purple for type.

For full keyword search across all hues, use HTML color codes. For palette generation, try the color scheme generator or color wheel.

:root {
  --purple: #800080;
  --purple-soft: #9370db;
  --purple-ink: #4b0082;
}

.banner {
  background-color: var(--purple);
  color: #ffffff;
}
Popular CSS purples
NameHEXRGBFeel
purple#800080128, 0, 128Base keyword
rebeccapurple#663399102, 51, 153Named shade
indigo#4B008275, 0, 130Named shade
violet#EE82EE238, 130, 238Named shade
orchid#DA70D6218, 112, 214Named shade
mediumpurple#9370DB147, 112, 219Mid tone
blueviolet#8A2BE2138, 43, 226Named shade
magenta#FF00FF255, 0, 255Named shade
darkmagenta#8B008B139, 0, 139Dark shade
darkorchid#9932CC153, 50, 204Dark shade
darkviolet#9400D3148, 0, 211Dark shade
fuchsia#FF00FF255, 0, 255Named shade
i Related hues may appear in Named shades when useful for purple-adjacent palettes.
Assumptions
  • Base keyword purple = #800080 in sRGB.
  • Named list uses CSS Color Module keywords in/near the purple family.
  • Tool runs locally; nothing is uploaded.
Units
  • HEX: #RRGGBB
  • RGB: 0–255
  • HSL/HSV: hue degrees; S/L/V percent
Boundary conditions
  • Lightness/saturation steps stay within visible ranges (~0–100%).
  • Hue offsets wrap modulo 360°.
Example
purple → #800080; complementary toward yellow-green/lime
Validation cases
  • purple → #800080
  • violet → #EE82EE
  • shade of purple → same hue, lower lightness
  • tint of purple → same hue, higher lightness
Sources
  • CSS Color Module named colors (purple family)
  • Classical shade/tint/tone and hue-harmony geometry
  • WCAG relative-luminance contrast
Calculation version
1.0.0
◉ Magenta color codes › ◉ Lavender color codes › ◉ Blue color codes › # HTML color codes › ◌ Color wheel ›

Frequently asked questions

Key distinctions behind the tool.

What is the hex code for purple?

The CSS named color purple is #800080, equal to rgb(128, 0, 128) and hsl(300°, 100%, 25%).

What is the difference between purple and violet?

Purple is dark and balanced. Violet is lighter and pinker in CSS.

What colors go with purple?

Cream, gold, and soft gray elevate purple. Lime accents create bold contrast. Always check text contrast.

Is purple good for body text?

Purple on white often passes for headings; light violet text on white usually fails.

How do I use purple in CSS?

Use color: purple;, color: #800080;, or color: rgb(128, 0, 128); on any property that accepts a <color> value, including background-color and border-color.