What Colors Go with Indigo? Color Pairings That Highlight Deep Blue-Purple
Indigo sits between blue and purple and works well when you want to give an interface depth or make primary actions stand out. If the background and body text are also dark, however, the result can feel heavy rather than refined. In this article, indigo #3F3B86 is used as one concrete example. It is paired with warm ivory, pale blue-gray, and muted gold to show how a deep blue-purple can remain prominent without dominating the whole page.
Pair indigo with light surfaces and a small amount of warmth
CSS HSL (Hue, Saturation, and Lightness) describes hue as the type of color, saturation as its intensity, and lightness as how light or dark it is. When a deep indigo is the main color, keeping large surrounding surfaces light creates enough lightness difference to preserve its depth while making the interface easier to organize.
For a calmer look, a pale blue-gray can be used on supporting surfaces. Nearby hues create continuity, which makes them useful for cards and sections that should feel connected. If you want more variation, a yellowish color farther away on the hue wheel can be limited to a small accent. HueRoll’s guide to complementary and analogous colors uses a similar division: nearby hues support continuity, while more distant hues are useful for emphasis.
Three colors that work well with deep indigo
| Color | HEX | Role | How to use it |
|---|---|---|---|
| Warm ivory | #F7F2EA | Large background | Softens the visual weight of indigo and creates light space around text and imagery. |
| Pale blue-gray | #DFE7EF | Cards and supporting surfaces | Keeps a blue-family connection while separating surfaces without a harsh color break. |
| Muted gold | #E6D8B5 | Small accent | Adds a warm counterpoint in badges or decorative details while keeping its area limited. |
Dark charcoal #292733 has a contrast ratio of about 13.16:1 on warm ivory #F7F2EA, about 11.74:1 on pale blue-gray #DFE7EF, and about 10.37:1 on muted gold #E6D8B5. All three exceed the WCAG 2.2 (Web Content Accessibility Guidelines) minimum of 4.5:1 for normal-size text.
When indigo #3F3B86 is used for links or a CTA (call-to-action button), its contrast ratio is about 8.64:1 against warm ivory #F7F2EA, about 7.71:1 against pale blue-gray #DFE7EF, and about 6.81:1 against muted gold #E6D8B5. White text #FFFFFF on indigo #3F3B86 has a ratio of about 9.63:1, so it can also be used for normal-size button text.
Main color:#3F3B86 / Background:#F7F2EA / Supporting surface:#DFE7EF / Accent:#E6D8B5
Preserve the depth of indigo by fixing its role and area
You do not have to make indigo lighter to keep it usable. Limiting where it appears can work just as well. Reserve indigo for primary buttons, part of a heading, or selected elements, while backgrounds and supporting surfaces stay light. If you use the 60–30–10 approach, treat it as a loose guide for separating background, supporting, and accent roles rather than as an exact pixel formula.
Do not communicate selection or importance only through the difference between indigo and another color. WCAG requires that color not be the only visual means of conveying information. Add text labels, icons, underlines, borders, or other visible cues.
HueRoll lets you review tints, shades, complementary and analogous colors, other harmony suggestions, and 60–30–10 candidates from a selected color. After choosing indigo, start with tints and analogous colors for lighter supporting surfaces, then compare complementary-side candidates as smaller accents. HueRoll’s contrast section compares the selected color only with white and black, so the arbitrary two-color contrast ratios shown in this article were calculated separately.