What Colors Go with Rich Magenta? Color Pairings to Make Deep Red-Purple Stand Out with a Lustrous Look [#B8148F]

Rich Magenta (■#B8148F) is a deep magenta that keeps a vivid red-purple hue while reducing overall lightness. On a website, it can work well on a cosmetics e-commerce product page or shade selector for the selected color name, important headings, and a primary purchase button while still leaving product photography as the main visual focus. If the products themselves already contain a lot of pink or purple, however, spreading magenta across large areas can blur the separation between the interface and the photography. Here, we pair Rich Magenta with Pearl White, Deep Aubergine, and Misty Teal to make the deep red-purple stand out with a lustrous look while keeping the page structure clear.

Use Pearl White as the base and Teal to create hue separation from red-purple

One practical combination pairs ■#B8148F with Pearl White ■#FFF7FC for the background, Deep Aubergine ■#30252F for body and supporting text, and Misty Teal ■#AFC8C4 for secondary controls.

■#FFF7FC is a very light color with a faint red-purple tint, so it keeps a visual connection to magenta while creating a large difference in lightness. ■#30252F is a dark color with a subtle purple cast, helping organize product names, prices, sizes, and descriptions without turning every text element magenta. ■#AFC8C4 is a muted blue-green. Its hue sits away from red-purple while its saturation stays restrained, so it can act as a secondary color without competing strongly with Rich Magenta.

On a shade-selection page, concentrate Rich Magenta on the selected result and primary action

For a practical layout, use ■#FFF7FC across the main product-detail and shade-list background, then apply ■#B8148F to the selected shade name, important headings, and the background of a primary “Add to cart” button. Text on that magenta background can use ■#FFF7FC, which provides enough contrast for normal-sized text. Product descriptions, prices, and stock information can use ■#30252F so magenta stays focused on the most important areas.

For secondary UI (user-interface elements such as buttons and shade controls), ■#AFC8C4 can be used as the background of a button such as “View ingredients” or an information chip, with both the text and border in ■#30252F.

A contrast ratio expresses the difference in relative luminance between text or a UI element and its background. ■#B8148F against ■#FFF7FC is about 5.65:1, ■#30252F against ■#FFF7FC is about 13.95:1, and ■#30252F against ■#AFC8C4 is about 8.30:1. WCAG (Web Content Accessibility Guidelines) 2.2 requires at least 4.5:1 for normal-sized text, so the text combinations shown here meet that threshold. In addition, ■#B8148F against ■#AFC8C4 is about 3.36:1, which also exceeds the 3:1 contrast needed for visual information required to identify adjacent UI components.

For a lustrous result, do not rely on magenta alone for product separation or selection state

■#AFC8C4 against ■#FFF7FC is only about 1.68:1. For that reason, avoid using a teal-filled area by itself to show that a button or chip exists on the light background. Add a ■#30252F border, text, or another clear visual boundary.

Likewise, states such as “selected,” “not selected,” or stock availability should not rely only on magenta-versus-teal color differences. Pair color with a check mark, state text, a stronger border, or another non-color cue. If the product photography already contains a lot of red-purple, leaving generous ■#FFF7FC space can separate the interface from the imagery better than extending ■#B8148F across the whole page. In HueRoll, you can enter ■#B8148F as a HEX color (a web color code beginning with #), then inspect related colors, palette suggestions, and the selected color’s contrast against white and black. HueRoll does not compare arbitrary pairs of colors or automatically label them AA or AAA, so the pairwise ratios in this article were calculated separately.