Blue Violet Color Hex Code, RGB & HSL Values

What is the meaning of the Blue Violet color?

Blue Violet is a highly intense color bridging blue and purple. It represents digital electricity, neon technology, and deep cosmic space, widely used in gaming and futuristic layouts.

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

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

What are the RGB and HSL codes of Blue Violet?

In the digital sRGB spectrum, the Blue Violet color code is mapped to RGB values of Red: 138, Green: 43, and Blue: 226. In the HSL system, it registers at hue angle 271°, saturation 76%, and lightness index 53%. It represents a balanced medium tone characterized by a highly vivid, intense, and brilliant shade.

CMYK print profiles for Blue Violet color

To reproduce the named shade Blue Violet in print systems, the CMYK ink configuration requires 39% Cyan, 81% Magenta, 0% Yellow, and 11% black. Purple carries luxury, creative thinking, and sophisticated branding connotations, highly recommended for creative studio layouts.

Red Channel 138

Green Channel 43

Blue Channel 226

Luminance 0.126

⇄ Blue Violet Color Space Conversions

Click to copy format

HEX Color Code #8A2BE2

RGB (Red Green Blue) rgb(138, 43, 226)

HSL (Hue Sat Light) hsl(271°, 76%, 53%)

CMYK (Commercial Print) cmyk(39%, 81%, 0%, 11%)

HSV / HSB Values hsv(271°, 81%, 89%)

Decimal Color Code 9055202

CSS Custom Variable --color-hex: #8A2BE2;

Tailwind CSS Utility bg-[#8A2BE2]

CSS Named Color blueviolet

◎ Contrast & Accessibility (WCAG 2.1) Check

White Text on Background

White text readability test with #8A2BE2

Small body copy preview

Black Text on Background

Black text readability test with #8A2BE2

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 Blue Violet */
--color-hex: #8A2BE2;
--color-rgb: rgb(138, 43, 226);
--color-hsl: hsl(271deg, 76%, 53%);
--color-name: blueviolet;

Aa Known Color Aliases

✦ Blue Violet Color Meaning

As a notable shade in the purple spectrum, Blue Violet embodies the core psychological traits of the purple color family. The purple spectrum 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

CreativityWisdomMysteryLuxury

Industries

SpiritualityTechnologyFood