Purple Color Hex Code, RGB & HSL Values

What is the meaning of the Purple color?

Purple combines the calm stability of blue with the energetic warmth of red. Historically associated with royalty, luxury, and wealth, it is commonly used by premium cosmetic lines, creative design agencies, and spiritual brands.

How to use the Purple color hex code in HTML & CSS?

To style elements with Purple on a website, use the hex code #800080 in your HTML/CSS. Adding background-color: #800080; will render the color. In Tailwind CSS, you can apply this shade dynamically using classes like bg-[#800080] or configuring it as a color variable in your configuration file.

What are the RGB and HSL codes of Purple?

In the digital sRGB spectrum, the Purple color code is mapped to RGB values of Red: 128, Green: 0, and Blue: 128. In the HSL system, it registers at hue angle 300°, saturation 100%, and lightness index 25%. It represents a dark, rich color characterized by a highly vivid, intense, and brilliant shade.

CMYK print profiles for Purple color

To reproduce the named shade Purple in print systems, the CMYK ink configuration requires 0% Cyan, 100% Magenta, 0% Yellow, and 50% black. These neutral color boundaries serve as solid structural backgrounds, layouts, and typography grids.

Red Channel 128

Green Channel 0

Blue Channel 128

Luminance 0.061

⇄ Purple Color Space Conversions

Click to copy format

HEX Color Code #800080

RGB (Red Green Blue) rgb(128, 0, 128)

HSL (Hue Sat Light) hsl(300°, 100%, 25%)

CMYK (Commercial Print) cmyk(0%, 100%, 0%, 50%)

HSV / HSB Values hsv(300°, 100%, 50%)

Decimal Color Code 8388736

CSS Custom Variable --color-hex: #800080;

Tailwind CSS Utility bg-[#800080]

CSS Named Color purple

◎ Contrast & Accessibility (WCAG 2.1) Check

White Text on Background

White text readability test with #800080

Small body copy preview

Black Text on Background

Black text readability test with #800080

Small body copy preview

◈ Complementary & Analogous Harmonies

Computed dynamically

▤ Shades & Tints Generator Matrix

Copy shade hex values instantly

Darker Shades (Adding Black)

Lighter Tints (Adding White)

{ } CSS Custom Properties (Variables)

Copy CSS Styles

/* CSS Custom Properties for Purple */
--color-hex: #800080;
--color-rgb: rgb(128, 0, 128);
--color-hsl: hsl(300deg, 100%, 25%);
--color-name: purple;

Aa Known Color Aliases

✦ Purple Color Meaning

In design psychology, Purple is classified as a purple shade, inheriting its psychological associations. The purple hue has been associated with royalty and power since ancient times when Tyrian purple dye cost more than gold by weight. This historical scarcity created a deep psychological association between purple and luxury, wisdom, and spiritual authority. Today, purple bridges the rational energy of blue with the passionate warmth of red, creating a color that feels both innovative and sophisticated. Lighter purples like lavender communicate romance and nostalgia, while deep violets convey mystery and premium quality. In design, purple stands out precisely because it is used less frequently than primary colors, creating an air of exclusivity.

Emotions & Associations

SpiritualityRoyaltyWisdomMystery

Industries

BeautySpiritualityFood