Skip to content

Violet #ee82ee

The edge of what your eyes can see.

RGB
238, 130, 238
HSL
300°, 76%, 72%
CMYK
0, 45, 0, 7
Luminance
0.4032

About Violet

Violet is the last color before ultraviolet — the shortest wavelengths human vision registers. CSS violet, #ee82ee, is confusingly a pale magenta-pink; spectral violet is deeper and bluer, and the gap between the two is a favorite pub-quiz trap for designers.

History

The flower named the color; Perkin’s mauveine (1856) made it the first industrially dyed fashion craze; and the Suffragette movement wore violet for dignity — political color-coding a century before hashtags.

Psychology

Violet blends stimulation and calm into imagination, spirituality and non-conformity. Lighter violets skew whimsical and floral; saturated violets read futuristic — the default hue of “AI” gradients across today’s tech (this hub’s own accent included).

In design

Modern UI violet lives at #8b5cf6/#7c3aed — vivid on both light and dark. CSS #ee82ee is a pastel: use it as fill or highlight, never text on white (2.0:1). Violet-to-cyan is the definitive 2020s gradient; violet with gold goes ecclesiastical.

In culture

Shrinking violets, violet hour, ultraviolet: the color of thresholds. Liturgically it is penance; poetically, twilight; digitally, the future.

Brands that own violet

Twitch#9146ffViber#7360f2Wonka#7b2d8bSyracuse#d44500Polkadot#e6007a

Shades of violet

PurpleIndigoOrchidLavenderAmethystBlue violetMagentaUI violet

Every format

HEX#ee82ee
RGBrgb(238, 130, 238)
HSLhsl(300, 76%, 72%)
CMYKcmyk(0%, 45%, 0%, 7%)
LABlab(69.7 56.4 -36.8)
LCHlch(69.7 67.3 326.9)
OKLCHoklch(0.762 0.186 327.2)

Copy-ready code

/* CSS */
color: #ee82ee;
background-color: #ee82ee;
/* Tailwind (arbitrary) */
class="text-[#ee82ee] bg-[#ee82ee]"
/* SCSS */
$brand: #ee82ee;
/* SwiftUI */
Color(red: 0.933, green: 0.510, blue: 0.933)
/* Android */
Color.parseColor("#ee82ee")

Accessibility — WCAG contrast

Aa
#ee82ee on white: 2.32:1
AA ✗ fail · AA-large ✗ · AAA ✗
Aa
#ee82ee on black: 9.06:1
AA ✓ pass · AA-large ✓ · AAA ✓
true color
protanopia
deuteranopia
tritanopia

RGB percentages

Red93.3%
Green51.0%
Blue93.3%

CMYK percentages

Cyan0.0%
Magenta45.4%
Yellow0.0%
Key (black)6.7%

Color previews

#ee82ee text on a black background

contrast 9.06:1

Card sample

#ee82ee text on a white background

contrast 2.32:1

Card sample

CSS3 live lab

Text font color

The quick brown fox

color: #ee82ee;
Background color
Panel with #ee82ee background
background-color: #ee82ee;
Text shadow — hex

Glowing headline

text-shadow: 2px 2px 8px #ee82ee;
Text shadow — RGB

Soft neon halo

text-shadow: 0 0 14px rgba(238, 130, 238, 0.45);
Div box shadow
Elevated card
box-shadow: 0 12px 32px -8px rgba(238, 130, 238, 0.45);
Border & gradient
Gradient panel
border: 3px solid #ee82ee;
background: linear-gradient(135deg, #ee82ee, #EE82A6);

Monochromatic scale

#360736#751075#B418B4#E330E3#EB6FEB#F4AEF4#FADBFA

Palettes built from #ee82ee

UI palette
#FADBFA
#ED78ED
#ee82ee
#901490
#89E789
Gradient stops
#DCA6F3
#ee82ee
#E95EBF
Accent trio
#ee82ee
#B8EE82
#82EEB8
Warm–cool bridge
#8282EE
#B882EE
#ee82ee
#EE82B8
#EE8282

Shades — darker

#EA62EA#E541E5#E121E1#C31AC3#A216A2#821282#610D61#410941#200420

Tints — lighter

#F08FF0#F19BF1#F3A8F3#F5B4F5#F7C1F7#F8CDF8#FADAFA#FCE6FC#FDF2FD

Hue & tone neighbors

#CA82EE#DC82EE#EE82DC#EE82CA#F4AFF4#E855E8#FC74FC#E090E0

Color harmonies

Complement
#ee82ee
#82EE82
Split-complement
#ee82ee
#B8EE82
#82EEB8
Analogous
#ee82ee
#B882EE
#EE82B8
Triadic
#ee82ee
#EEEE82
#82EEEE
Tetradic
#ee82ee
#EEB882
#82EE82
#82B8EE

Nearest named colors

violet · ΔE 0.0orchid · ΔE 7.4plum · ΔE 28.3slateblue · ΔE 38.0purple · ΔE 40.0

Violet, answered

What is the hex code for violet?

CSS violet is #ee82ee (a pale magenta); spectral violet is closer to #7f00ff. Modern interface violet centers on #8b5cf6.

Violet vs purple — what’s the difference?

Violet is a spectral color (real wavelengths ~380–435 nm); purple is a non-spectral mix of red and blue that the rainbow never shows. All purples are constructed; violet is physics.

Why do AI products use violet?

It signals imagination and futurity without blue’s corporate baggage, and it gradients beautifully into cyan and pink — the visual shorthand of the current tech era.

Work with #ee82ee in the Color Lab

Contrast Checker →Palette Generator →Palette Pro →Scale Generator →CSS Code Generator →Color Blind Simulator →Accessibility Checker →Color Distance →