CSS named color

BlueViolet

#8A2BE2
HEX#8a2be2
RGBrgb(138, 43, 226)
HSLhsl(271, 76%, 53%)
OKLCHoklch(53.38% 0.2503 301.37)
NAMEblueviolet

Palette

Complementary

180° on the color wheel
Complement
#84E22C

Analogous

±30° around the base hue
Left
#2F2CE2
Right
#E22CDF

Triadic

±120° for harmonic contrast
Triad 1
#E28A2C
Triad 2
#2CE28A

Shades

Lighter and darker variants
Lightest
#E1C9F8
Lighter
#BC86EE
Base
#8A2BE2
BlueViolet
Darker
#561494
Darkest
#2F0B51

CSS usage

By name
color: blueviolet;
background-color: blueviolet;
By HEX
color: #8a2be2;
background-color: #8a2be2;
By RGB
color: rgb(138, 43, 226);
background-color: rgb(138, 43, 226);
By HSL
color: hsl(271, 76%, 53%);
background-color: hsl(271, 76%, 53%);

WCAG contrast vs white

Aa
5.96:1
AA

WCAG contrast vs black

Aa
3.52:1
AA (large text)

Related colors

FAQ — BlueViolet

What is the HEX code for BlueViolet?

The HEX code for BlueViolet is #8A2BE2. It's one of the 148 named CSS colors and can be used directly in CSS as color: blueviolet; or color: #8a2be2;

What is BlueViolet in RGB?

BlueViolet in RGB is rgb(138, 43, 226) — red 138, green 43, blue 226.

What is BlueViolet in HSL?

BlueViolet in HSL is hsl(271, 76%, 53%) — hue 271°, saturation 76%, lightness 53%.

What is the complementary color of BlueViolet?

The complementary color (directly opposite BlueViolet on the color wheel) is #84E22C. The two together produce maximum contrast.

Is white text readable on BlueViolet?

The WCAG contrast ratio against white (#FFFFFF) is 5.96:1, and against black (#000000) it's 3.52:1. White text is more readable. WCAG recommends at least 4.5:1 for body text.

← All colors & converter