Color guide · Purple colors
Indigo Color
CSS indigo is a very dark violet-blue. It works as a dramatic base color with carefully chosen light text and brighter accents. The web color should not be confused with one universal shade of indigo-dyed cloth.
Indigo color codes
#4B0082rgb(75, 0, 130)hsl(274.6, 100%, 25.5%)indigoRGB 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 indigo interesting?
Indigo is also the name of a plant-derived dye tradition. Kew describes true indigo as a dye plant and discusses the difficult colonial history surrounding its production. A dye bath, its preparation and the textile affect the finished color; the CSS keyword is a separate digital convention.
Read the reference: Kew: true indigo ↗
Things with indigo tones
These illustrated references explore a color family. Objects vary; none is a claim of an exact #4B0082 match.
Dyed textile inspiration
Folded cloth adds highlights and shadows that a flat indigo swatch cannot capture.
Evening water
An indigo illustration can suggest an evening scene when paired with sparse, pale reflections.
Dark violet accents
A stylized dark crystal needs a lighter edge to stay visible against an indigo background.
A practical color study
Design a night scene with distinct layers
Use indigo as one layer in a night palette, not every shadow at once. A slightly lighter sky, a darker foreground and a narrow pale reflection help the scene remain readable. Small gold or mint highlights can identify a useful object without lighting the whole scene.
On a website, a deep hero band can frame light type. Keep long reading sections on a calmer surface and maintain visible focus rings and control edges inside the dark area.
Ideas for using indigo
Web interfaces
Use indigo for a hero panel, with a readable light foreground and clear button boundaries.
Game art
Build night scenes with separated silhouettes. Add a lighter blue or violet rim rather than making every shadow the same indigo.
Editorial layouts
A deep indigo cover can frame a cream title and one bright accent. Keep long reading sections on a gentler surface.
Watch out: Indigo on black can disappear. A dark theme still needs measurable differences between text, controls and backgrounds.
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 indigo
See the palette at work
Palette preview studio
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.
Make something worth exploring.
A clear reading surface, one useful accent and room for the details.
Explore the collection →COLOR
IN MOTION
Make room for a new perspective.
Explore. Experiment. Create.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 ↗
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 itCompare indigo with another color →
Questions about indigo
Is CSS indigo the exact color of indigo dye?
No. Dyed materials vary with the process, fiber and lighting; #4B0082 is the CSS named-color value.
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
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