About Blue Violet
Blue Violet (blueviolet) is a medium, vivid purple with the hex code #8a2be2, or rgb(138, 43, 226). In HSL it sits at a hue of 271°, 76% saturation and 53% lightness. It is one of the 148 named colors every browser understands, so you can write color: blueviolet; instead of the hex value.
Using Blue Violet for text and backgrounds
| Pairing | Contrast ratio | WCAG |
|---|---|---|
| Blue Violet text on white | 5.96 : 1 | AA |
| Blue Violet text on black | 3.52 : 1 | AA large text only |
On a blue violet background, use white text (5.96 : 1). WCAG asks for at least 4.5 : 1 for body text and 3 : 1 for large text. Check other pairs with the Contrast Checker.
CSS
.element {
color: blueviolet; /* or #8a2be2 */
background-color: #8a2be2;
border: 1px solid rgb(138 43 226 / 50%);
}Similar named colors
Dark Orchid (#9932cc), Dark Violet (#9400d3), Slate Blue (#6a5acd), Medium Slate Blue (#7b68ee), Medium Orchid (#ba55d3), Medium Purple (#9370db).
Color Name FinderPaste a HEX code to get its closest human-readable name and clean token names for your CSS, SCSS, JavaScript or Tailwind config.
Open the tool Frequently asked questions
What is the hex code for blue violet?
#8a2be2 — that is rgb(138, 43, 226) and hsl(271, 76%, 53%). In CSS you can also just write blueviolet.
Is blue violet text readable on white?
Its contrast ratio on white is 5.96 : 1, which passes WCAG AA for normal text.
What colors go well with blue violet?
Its complementary color is #84e22c; analogous colors #2f2ce2 and #e22cdf sit next to it on the color wheel.