Pink Color Family

Violet Color Hex Code, RGB & HSL Values

Browse all Pink Colors

What is the meaning of the Violet color?

Violet is a soft, light purple-pink color. It represents spring blossoms, quiet creative energy, and soft luxury, providing a gentle, welcoming backdrop for beauty and lifestyle sites.

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

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

What are the RGB and HSL codes of Violet?

In the digital sRGB spectrum, the Violet color code is mapped to RGB values of Red: 238, Green: 130, and Blue: 238. In the HSL system, it registers at hue angle 300°, saturation 76%, and lightness index 72%. It represents a bright, soft tint characterized by a highly vivid, intense, and brilliant shade.

CMYK print profiles for Violet color

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

Red Channel 238
Green Channel 130
Blue Channel 238
Luminance 0.403

Violet Color Space Conversions

Click to copy format
HEX Color Code #EE82EE
RGB (Red Green Blue) rgb(238, 130, 238)
HSL (Hue Sat Light) hsl(300°, 76%, 72%)
CMYK (Commercial Print) cmyk(0%, 45%, 0%, 7%)
HSV / HSB Values hsv(300°, 45%, 93%)
Decimal Color Code 15631086
CSS Custom Variable --color-hex: #EE82EE;
Tailwind CSS Utility bg-[#EE82EE]
CSS Named Color violet

Contrast & Accessibility (WCAG 2.1) Check

White Text on Background

White text readability test with #EE82EE

Small body copy preview

Black Text on Background

Black text readability test with #EE82EE

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 Violet */
--color-hex: #EE82EE;
--color-rgb: rgb(238, 130, 238);
--color-hsl: hsl(300deg, 76%, 72%);
--color-name: violet;

Aa Known Color Aliases

Violet violet (CSS Identifier) Light VioletPale VioletSoft Violet

Violet Color Meaning

Representing the pink color family, Violet carries the intrinsic characteristics of this organic hue. This color group is physiologically calming — studies in correctional facilities showed that painting cells a specific shade of pink (Baker-Miller Pink) reduced aggressive behavior in inmates within minutes. It combines the energetic power of red with white's purity, creating a color associated with love, tenderness, and care. In Western cultures, pink has strong gender associations with femininity, though globally it carries different meanings — in Japan it represents good health and prosperity. Hot pinks and magentas convey energy and confidence, while pastels suggest sweetness and innocence. Pink is increasingly used across all demographics as brands seek to communicate approachability and emotional warmth.

Emotions & Associations

SweetnessCompassionRomanceNurturing

Industries

FashionChildrenConfectionery

Adjacent HEX Color Codes

Color Comparisons & Differences

🎨 Cohesive Color Combinations & Palettes

Copied!