Color guide · Purple colors

Lavender Color

CSS lavender is a pale, cool violet with equal red and green channels. It is much lighter than many lavender flowers. As a background, it gives dark text room to stand out without a stark white surface.

A very pale violet for spacious backgrounds#E6E6FACSS keyword: lavender

Lavender color codes

HEX#E6E6FA
RGBrgb(230, 230, 250)
HSLhsl(240, 66.7%, 94.1%)
CSS keywordlavender

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 lavender interesting?

Kew describes English lavender flowers ranging from light to dark purple, with some white-flowered varieties. The web keyword captures only one pale interpretation of the name. Botanical color, a fragrance label and a CSS shade should not be treated as interchangeable standards.

Read the reference: Kew: English lavender ↗

Things with lavender tones

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

Illustrated placeholder · image coming later

Lavender flower spikes

Flower references are often deeper purple than the digital background shown here.

Illustrated placeholder · image coming later

Pale fabric

A lavender-colored fabric can suggest a gentle light surface, while folds reveal cooler shadows.

Illustrated placeholder · image coming later

Pastel ceramics

A pale glazed object adds a little color without dominating an interior palette.

A practical color study

A pale surface still needs structure

Lavender can soften a reading surface, but the difference from white is not a dependable border. Add a visible edge, spacing or shadow to distinguish a card. Use a darker violet for the heading rather than placing pale lavender text on white.

In an illustration, lavender can suggest distance or mist. Let the foreground retain stronger value differences, and avoid using the pale background shade for every highlight.

Ideas for using lavender

01

Web interfaces

Try lavender as a card or editorial background, with a dark violet heading. Check pale borders and muted captions separately.

02

Game art

Use pale lavender in mist, highlights or a distant landscape. Stronger purple details can define the silhouette.

03

Illustration

Pair lavender with a warm cream or restrained gold accent. Leave enough neutral space that the palette stays light.

Watch out: Lavender text on white is difficult to read. Treat this shade as a surface first and choose a darker text color.

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 lavender

Lavender Night

A clear purple light-to-dark ladder

Explore palette →

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.

17.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 lavender with another color →

Questions about lavender

Why is the lavender swatch lighter than the plant?

CSS lavender is one fixed pale shade. Flower colors vary, including deeper purple and white varieties.

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 →

#FFD700
Warm colors

Gold

A clear yellow for highlights and celebration

Explore color →
#4B0082
Purple colors

Indigo

A deep violet-blue for strong dark surfaces

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