10 Different Shades of Violet (+ HEX codes)

Explore all shades of violet, from lighter to darker shades. See HEX codes, shade names, and violet color palettes. Click any shade to copy its HEX code.

Violet is the last colour the eye can see before the spectrum runs out, and it keeps something of that strangeness: imaginative, a little unreal, historically expensive.

Modern software uses it for AI and for creative tools. Balance it with a warm neutral so it does not turn theatrical.

blue chalk
#f5ebff
fog
#e9d2ff
mauve
#dcbaff
heliotrope
#c489ff
electric violet
#9f40ff
purple
#6200c4
pigment indigo
#4a0094
christalle
#310063
tolopea
#25004a
black russian
#190032

Violet: HEX & RGB Codes

violet has the following primary color codes:

HEX: #f5ebff
RGB: (245, 235, 255).

Explore a wide range of violet shades using our interactive color picker. Click any color to copy its HEX code and use it in your project!

Explore tints of violet

Blue Chalk
#f5ebff
Blue Chalk
#f5ebff
Magnolia
#f7f0ff
Magnolia
#f7f0ff
Magnolia
#faf5ff
Magnolia
#faf5ff
Magnolia
#faf5ff
Magnolia
#fcfaff
Magnolia
#fcfaff
White
#ffffff

Explore shades of violet

Violet
#1f0934
Valhalla
#30154c
Jacarta
#452565
Victoria
#5e3b81
Butterfly Bush
#78559b
Purple Mountain's Majesty
#9474b4
East Side
#b094cc
Prelude
#d1bde5

violet in HEX, RGB, HSL and CMYK

HEX	#7F00FF
RGB	rgb(127, 0, 255)
HSL	hsl(270, 100%, 50%)
CMYK	cmyk(50%, 100%, 0%, 0%)

Tints and shades of violet

Tints add white and shades add black, keeping the hue. Use them for hover states, borders and backgrounds that still belong to the same colour.

Tints (lighter)

#9327ff
#a74eff
#ba75ff
#ce9cff
#e1c4ff
#f5ebff

Shades (darker)

#6c00d8
#5800b1
#45008a
#310063
#1e003b
#0a0014

Colours that work with violet

Complementary

#7F00FF #80ff00

Opposite on the colour wheel. Maximum contrast — use it for accents, not for half the page.

Analogous

#0000ff #7F00FF #ff00ff

Neighbours on the wheel. Calm and cohesive, the safest way to build a palette.

Triadic

#7F00FF #ff8000 #00ff80

Three colours evenly spaced. Lively and balanced; let one dominate.

Text on violet

Example Primary text

White text on violet6.28:1AA

Example Primary text

Near-black text on violet2.83:1Fail

Measured against WCAG: 4.5:1 for body text, 3:1 for large text. Test your own pair in the Contrast Checker

violet shade chart

Shade chart showing five steps of violet, from light tint to deep shade

Right-click to save the chart, or copy the individual codes above.