What Colors Go with Near-Black Indigo? Color Pairings to Give an Extremely Dark Blue-Purple a Mysterious Look [#131122]

Near-Black Indigo (■#131122) is an extremely dark blue-purple that sits close to black. On a website, it can create a strong dark surface on its own, but stacking only nearby blue-purple tones can make the whole page feel visually heavy. This article pairs ■#131122 with a light color, a related cool tone, and a restrained warm accent to build more depth while keeping the dark base dominant.

Pair it with off-white, muted blue, and dusty rose

One practical combination is a cool off-white ■#F1F2F7, a muted blue ■#8E9BC4, and a subdued dusty rose ■#C39AAE.

■#F1F2F7 creates a large brightness difference from the base color, so it works well for headings, body text on dark areas, and lighter reading surfaces. ■#8E9BC4 stays close to the blue-purple family while adding more lightness, making it useful for secondary information or subtle separators. ■#C39AAE introduces a soft red cast that differs from the cool base, so it can give a primary button or small accent a separate role.

Using the three colors as a light surface, a blue-purple supporting tone, and a warmer accent keeps ■#131122 in the lead. If the dusty rose occupies too much area, its red cast becomes more noticeable, so it is easier to start with smaller elements and adjust from there.

Concentrate the dark color in key sections and keep the reading area light

With ■#131122 as the base, the roles can be divided like this.

A top section can use ■#131122, with headings and introductory copy in ■#F1F2F7, secondary information in ■#8E9BC4, and the primary action button in ■#C39AAE. The main reading area can then switch to ■#F1F2F7 with ■#131122 for body text, so the dark indigo remains memorable without carrying long passages on a dark surface.

The contrast ratio is about 16.61:1 for ■#131122 with ■#F1F2F7, 6.75:1 for ■#131122 with ■#8E9BC4, and 7.56:1 for ■#131122 with ■#C39AAE. Under WCAG 2.2, normal text needs at least 4.5:1 contrast, while visual parts needed to identify controls, states, or meaningful icons need at least 3:1 against adjacent colors. The text pairs shown here meet those thresholds.

By contrast, ■#8E9BC4 on ■#F1F2F7 is about 2.46:1, and ■#C39AAE on ■#F1F2F7 is about 2.20:1. Neither should be used for normal body text on that light background.

Build the mysterious mood with dark-area size and accent placement

■#131122 appears closer to black as it covers a larger area. Instead of making the entire page dark, limit it to the top, bottom, or other selected sections and place lighter ■#F1F2F7 surfaces between them to create a clearer shift in brightness.

Use ■#8E9BC4 as a supporting color that stays connected to the base, and reserve ■#C39AAE for a primary button, small label, or another limited accent so the warmer tone does not dominate. The overall impression also changes with photography and color area, so check the balance of dark, light, and accent colors in the actual layout.

In HueRoll, you can enter ■#131122 as a HEX value, explore related colors and palette suggestions, and compare the selected color with white or black. HueRoll does not compare arbitrary pairs of colors or automatically determine WCAG conformance levels, so the pairwise contrast ratios in this article were calculated separately.