Blueviolet #8A2BE2 colour

#8A2BE2 is the CSS colour blueviolet. RGB 138, 43, 226, HSL 271, 76%, 53%. White text passes AA (5.96:1), black passes AA for large text (3.52:1).

#8A2BE2

CSS name: blueviolet
Nearest other: darkviolet #9400d3
Described as: a violet
Red, green, blue: 138, 43, 226
Web safe: No
Luminance: 0.1262 (WCAG relative luminance, 0 is black, 1 is white)

Colour codes

HEX	`#8a2be2`
RGB	`rgb(138, 43, 226)`
RGB (percent)	`rgb(54.1% 16.9% 88.6%)`
HSL	`hsl(271.1, 75.9%, 52.7%)`
HSV / HSB	`hsv(271.1, 81%, 88.6%)`
HWB	`hwb(271.1 16.9% 11.4%)`
CMYK (naive)	`cmyk(39%, 81%, 0%, 11%)`
CIELAB (D50)	`lab(41.21% 63.01 -75.95)`
OKLCH	`oklch(53.38% 0.2503 301.37)`
Decimal	`9055202`

CMYK here is the plain formula with no colour profile, so treat it as a starting point; a printer's profile gives the real ink values. CIELAB uses a D50 white point, as CSS lab() does. HSV is not a CSS function, so it is shown for design apps only.

Contrast with white and black text

White text, 5.96:1The quick brown fox jumps over the lazy dog.

Black text, 3.52:1The quick brown fox jumps over the lazy dog.

Text	Ratio	AA normal (4.5)	AA large (3)	AAA normal (7)	AAA large (4.5)
White	5.96:1	Pass	Pass	Fail	Pass
Black	3.52:1	Fail	Pass	Fail	Fail

White text is the better choice on #8A2BE2 (5.96:1). Ratios use the WCAG 2.2 formula; large text means at least 24px, or 18.66px bold. Check another pair.

Tints and shades

Mixed with white, then with black, in ten even steps (straight sRGB mixing, as most design tools do).

9%#953ee5 18%#9f52e7 27%#aa65ea 36%#b578ed 45%#bf8bef 55%#ca9ff2 64%#d4b2f4 73%#dfc5f7 82%#ead8fa 91%#f4ecfc

9%#7d27cd 18%#7123b9 27%#641fa4 36%#581b90 45%#4b177b 55%#3f1467 64%#321052 73%#260c3e 82%#190829 91%#0d0415

Colour harmonies

Hue turned around the HSL colour wheel, saturation and lightness kept.

Complementary

The hue opposite on the colour wheel (180°).

#8a2be2 #83e22b

Analogous

Neighbours 30° either side.

#2f2be2 #8a2be2 #e22bdf

Triadic

Three hues 120° apart.

#8a2be2 #e28a2b #2be28a

Split complementary

The two hues either side of the complement (150° and 210°).

#8a2be2 #dfe22b #2be22f

Tetradic (square)

Four hues 90° apart.

#8a2be2 #e22f2b #83e22b #2bdfe2

How it looks with colour blindness

Normal vision#8a2be2 Protanopia#0063e7 Deuteranopia#0063df Tritanopia#765f89 Achromatopsia#646464

Simulated with the Machado, Oliveira and Fernandes (2009) matrices at full severity, applied in linear RGB; achromatopsia shows the colour's luminance as grey. Milder forms (protanomaly, deuteranomaly) are far more common and shift colours less. Never use colour as the only way to carry meaning.

CSS

Text colour	`color: #8a2be2;`
Background	`background-color: #8a2be2;`
Border	`border: 1px solid #8a2be2;`
Half transparent	`background-color: rgb(138 43 226 / 50%);`
Custom property	`--colour-main: #8a2be2;`
Gradient to a darker shade	`background: linear-gradient(135deg, #8a2be2, #531a88);`
Gradient from a lighter tint	`background: linear-gradient(180deg, #b980ee, #8a2be2);`
Text on this colour	`background-color: #8a2be2; color: #fff;`

Similar named colours

Distance is measured in OKLab, scaled by 100; under about 2 is hard to tell apart side by side.

Convert #8A2BE2 to other formats · Build a palette from it · Check contrast · All named colours

Colour names from CSS Color Module Level 4. Palette values from the Tailwind CSS v3 default palette (MIT licence) and the Material Design 2014 colour palette as published in Material Design Lite (Apache License 2.0). All other values are calculated from the hex code.