What does the color Violet mean?

Pink

Violet

#ee82ee

#f19bf1

#f5b4f5

#f8cdf8

#fce6fc

#d882d8

Meaning

Compassion, playfulness, and romance. Popular in beauty, lifestyle, and youth-focused products.

History

Violet is a standard CSS/SVG named color used across browsers since early web standards.

Usage

Use Violet (#ee82ee) in CSS as color: violet; or as #ee82ee.

Preview

Violet

#ee82ee

Overview

Family: Pink

Accessibility on this swatch:

AAA

(9.06:1)

Contrast vs white: 2.32:1 · vs black: 9.06:1

Formats

HEX

#ee82ee

RGB

rgb(238, 130, 238)

RGBA

rgba(238, 130, 238, 1)

HSL

hsl(300, 76%, 72%)

HSV

hsv(300, 45%, 93%)

LAB

lab(69.7% 56.36 -36.81)

LCH

lch(69.7% 67.32 326.85)

OKLAB

oklab(0.7619 0.1565 -0.1008)

OKLCH

oklch(0.7619 0.1862 327.21)

XYZ

xyz(58.67, 40.32, 85.56)

CMYK

cmyk(0%, 45%, 0%, 7%)

CSS

color: #ee82ee;

CSS variable

--color-ee82ee: #ee82ee;

SCSS

$color-ee82ee: #ee82ee;

Tailwind

fuchsia-200

Export

Developer code

:root {
  --violet-1: #ee82ee;
}

Color psychology

Compassion, playfulness, and romance. Popular in beauty, lifestyle, and youth-focused products.

Usage examples: primary buttons, chart series, status badges, marketing gradients, and brand accents in the Pink family.

Tints

Shades

Tones

Complementary

Analogous

Triadic

Split complementary

Monochromatic

Related shades & tints

#f19bf1

#f5b4f5

#f8cdf8

#fce6fc

#d882d8

#c281c2

#ac81ac

#968096

Similar colors

#da70d6

#ba55d3

#ff69b4

#9370db

#dda0dd

#8c87e3

#7973e8

#7974dc

Browse more in the color name library.