What Colors Go with Near-Black Magenta? Color Pairings to Give a Near-Black Reddish Purple a Refined, Lustrous Look [#22111E]

Near-Black Magenta (■#22111E) is an extremely dark reddish purple that still keeps a visible magenta cast. On a website, it is usually easier to use this color on selected dark areas rather than fill the whole page with it. Pairing it with a light surface also gives the reddish-purple character more room to stand out. This article combines ■#22111E with three companion colors and shows how to assign them to backgrounds, text, supporting elements, and buttons.

Pair it with off-white, mauve, and blue-green

One practical combination is a pale off-white ■#F6F1F5, a subdued mauve ■#B986A8, and a soft blue-green ■#87BFB2.

■#F6F1F5 creates a large lightness difference from ■#22111E, so it can provide a clearly lighter surface beside the dark base color. ■#B986A8 stays relatively close in hue to reddish purple, while being lighter and lower in saturation, making it useful as a related supporting tone. ■#87BFB2 moves away from reddish purple toward blue-green, creating a clearer hue difference for buttons or small accents.

Giving the three colors separate jobs—a light surface, a related supporting color, and a contrasting accent—keeps the near-black magenta in the lead without making every element compete. Because the blue-green creates a noticeable contrast in hue, it is easier to control when it starts on smaller areas such as a primary button or a compact highlight.

Separate dark sections from the main reading area

With ■#22111E as the base, the roles can be defined like this.

For example, the top section can use ■#22111E, with headings and introductory copy in ■#F6F1F5, secondary information in ■#B986A8, and the primary action button in ■#87BFB2. The main reading area can then switch to ■#F6F1F5 with ■#22111E for body text, so long passages do not remain on a dark background.

A contrast ratio expresses the light-dark difference between foreground and background colors. The ratio is about 16.13:1 for ■#22111E with ■#F6F1F5, 6.03:1 for ■#22111E with ■#B986A8, and 8.68:1 for ■#22111E with ■#87BFB2. WCAG 2.2 requires at least 4.5:1 for normal-sized text at Level AA, so the three text pairs shown here meet that requirement. Visual information required to identify user-interface controls, states, or meaningful icons needs at least 3:1 contrast against adjacent colors.

By contrast, ■#B986A8 on ■#F6F1F5 is only about 2.67:1, so it should not be used for normal body text on that light background. If mauve is needed in the light content area, keep it decorative or adjust it to a darker value and check the new pair again before using it for text.

Control the lustrous mood with area and light-dark balance

■#22111E can look almost black in a small swatch, while a larger surface makes its reddish-purple undertone easier to notice. Adding several similar purples simply to make the design feel more luxurious can blur the distinction between headings, buttons, and secondary information. A cleaner approach is to establish the major light-dark structure with ■#22111E and ■#F6F1F5 first, then add ■#B986A8 and ■#87BFB2 only where they have a clear role.

To emphasize the reddish-purple character, slightly increase the area occupied by ■#B986A8. To make the page calmer, increase the amount of ■#F6F1F5 used for whitespace and card surfaces. Keeping the blue-green ■#87BFB2 for the actions that truly need attention also helps preserve a clear visual hierarchy.

In HueRoll, you can enter ■#22111E as a HEX color 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. Treat this palette as one practical example and adjust it for the actual screen size, color area, surrounding images, and amount of text.