Color guide · Purple colors

Violet Color

CSS violet is a light, saturated pink-purple. It can be a lively accent in a purple family, but it is much brighter than indigo or Rebecca purple. Dark text is the better first candidate when it fills a panel.

A bright pink-purple, distinct from deep indigo#EE82EECSS keyword: violet

Violet color codes

HEX#EE82EE
RGBrgb(238, 130, 238)
HSLhsl(300, 76.1%, 72.2%)
CSS keywordviolet

RGB values use the 0–255 scale. HSL values are rounded to one decimal place for display. CSS Color: named colors ↗

The name & the reference

What makes violet interesting?

The CSS keyword violet is a display color built from red, green and blue channels. A color name and a single wavelength of light are not interchangeable definitions. This guide uses the web-standard value so you can compare it reliably with the lighter lavender and darker purple anchors in the collection.

Read the reference: CSS Color: named colors ↗

Things with violet tones

These illustrated references explore a color family. Objects vary; none is a claim of an exact #EE82EE match.

Illustrated placeholder · image coming later

Purple-pink petals

A stylized petal reference can provide companions that are softer or darker than the accent.

Illustrated placeholder · image coming later

Bright purple textiles

A small violet fabric area can carry the focal point against a dark background.

Illustrated placeholder · image coming later

Violet decorative forms

Use pale highlights and deeper outlines to define a bright faceted shape.

Ideas for using violet

01

Interfaces

Use violet for one selected surface with dark text and another active-state cue.

02

Games

Combine a violet midtone with indigo shadows for a magical accessory.

03

Illustration

Keep a violet subject distinct from pink surroundings using lightness, outlines and negative space.

Watch out: Several saturated purples at equal size can compete. Give each shade a different role.

Tints, shades & companion hues

These tints and shades are simple sRGB channel mixes with white or black. They are useful starting points, not perceptually equal steps or guaranteed accessible pairs. Select a swatch to copy its hex code.

Hue companions

Calculated in HSL with the same saturation and lightness. Complementary and analogous colors suggest hue relationships; they do not promise contrast.

Palettes featuring violet

Petal Study

A strong rose accent with softer violet neighbors

Explore palette →

See the palette at work

Palette preview studio

Compare two colors →

Try a website, a game scene, a poster or a room. Pick a role, then select a swatch to repaint it. These are schematic design previews, not rendered materials or a game engine.

Text is automatically chosen as black or white for opaque preview surfaces. This does not certify your exported palette for every use.

Color & craftStories · Studio
A thoughtful starting point

Make something worth exploring.

A clear reading surface, one useful accent and room for the details.

Explore the collection →
Design notesNew ideasSmall details

Try it in context

Live design & contrast preview

Change the surface and text independently. The text result uses opaque sRGB colors; it does not evaluate your entire page.

9.06:1 · AAA normal text

AA normal text needs 4.5:1; AA large text needs 3:1. Large text means at least 18 pt, or 14 pt bold. Ratios are assessed before rounding. This is a text check, not a complete accessibility audit. W3C: understanding text contrast ↗

A little color goes a long way

Your next good idea

Try a readable heading, a short paragraph and a clear action on this surface.

Example action →Static design sample · use the controls to change it

Compare violet with another color →

Questions about violet

Is CSS violet the same as lavender?

No. Violet is brighter and more saturated; CSS lavender is a very pale cool shade.

Will this look the same in print?

No exact print match is promised. Paper, ink, color profiles and lighting affect the result. Use a physical proof when a precise material match matters.

Can I use these codes in a website or game?

Yes. Copy the exact code, give it a clear role in your palette and test text contrast. Add labels or shapes when color communicates important information.

Keep exploring

Explore purple colors →

#4B0082
Purple colors

Indigo

A deep violet-blue for strong dark surfaces

Explore color →
#E6E6FA
Purple colors

Lavender

A very pale violet for spacious backgrounds

Explore color →
#663399
Purple colors

Rebecca Purple

A balanced purple with a specific web identity

Explore color →

A color name is a starting point

Digital codes describe sRGB colors. Natural objects, paint, ink and screens can look different under different lighting or calibration. Visual references illustrate color families rather than exact measured matches. Placeholder illustrations are clearly labeled. Design ideas are suggestions, not universal claims about emotion or culture.

Pick colors from an image · Convert a color · Check a complete text pair · Suggest a color guide