Palette collection

Lavender Night Palette

Lavender, Rebecca purple and indigo supply three distinct value roles. Gold is a small highlight. The palette can support a fantasy illustration or a reading interface, provided text choices are measured separately on each surface.

#E6E6FA#663399#4B0082#FFD700#191226

Give each color a job

#E6E6FALight surface
#663399Midtone accent
#4B0082Dark surface
#FFD700Small highlight
#191226Body text

A practical starting layout

For a game inventory panel, place the main labels in a light-on-indigo area, reserve gold for a selected item and use lavender for a secondary card with dark text. Keep selection visible with an outline too.

These roles are recommendations, not a guarantee of accessibility. Use the controls below to test foreground and background separately. Accent colors can be decorative even when they fail as ordinary text.

Take this palette into your project

Exports include the original five colors and their suggested roles. Use the preview studio to experiment; these downloads keep the published palette unchanged.

CSS variables are available above. PNG and SVG use a labeled 1500 × 680 palette sheet; JSON includes HEX, RGB, HSL and role labels.

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.

12.95: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

Read the color guides

#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 →
#4B0082
Purple colors

Indigo

A deep violet-blue for strong dark surfaces

Explore color →
#FFD700
Warm colors

Gold

A clear yellow for highlights and celebration

Explore color →

Try another direction

Coastal Coral

A warm subject in cool surroundings

Explore palette →

Woodland Paper

Leaf green, warm earth and a light base

Explore palette →

Bold Pink & Blue

A lively accent with a stable dark anchor

Explore palette →

Sunset Signals

Warm accents above a dark anchor

Explore palette →

Garden Notes

Muted foliage with a bright mint detail

Explore palette →

Blueprint Paper

A navy structure with a pale sky-blue surface

Explore palette →

Earthwork

Warm browns with an explicit dark outline

Explore palette →

Petal Study

A strong rose accent with softer violet neighbors

Explore palette →

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