What Colors Go with Pure Magenta? Color Pairings That Make High-Purity Red-Violet Stand Out Vividly [#FF00BF]

Pure Magenta (■#FF00BF) is a highly vivid red-violet that sits between red and purple. On a template gallery for an online design tool, it can work well for recommended-template badges, the selected category, and a primary “Use This Template” button, helping the high-purity red-violet stand out vividly while creating a clear action hierarchy. Because its contrast with white is not sufficient for normal-size text, pairing the magenta surface with a dark text color is more practical. This example combines Pure Magenta with Cool Lilac White, Ink Plum, and Deep Indigo.

Use light Lilac White as the base, then sharpen magenta with dark plum

One possible combination for ■#FF00BF is Cool Lilac White ■#FAF7FC for the background, Ink Plum ■#1B1722 for body text, template names, and primary-button text, and Deep Indigo ■#314B70 for secondary actions.

■#FAF7FC is a very light color with a faint lilac cast, keeping the space around template thumbnails light while supporting the vivid magenta. ■#1B1722 is a low-saturation dark color with a slight purple cast, making it suitable for template names, usage descriptions, and size information without letting the accent color dominate. ■#314B70 is a deep blue. Its hue (the basic color family, such as red, blue, or green) is far from magenta while its saturation stays restrained, so it can separate a secondary action such as “View Details” from the primary action.

In a template gallery, concentrate Pure Magenta in the selected category and primary CTA

For a concrete layout, use ■#FAF7FC for the page and template-card backgrounds. Use ■#FF00BF for “Recommended” badges, the selected category, and the background of the primary CTA (Call to Action, a control that prompts the next step, such as applying a template). Set the text on that surface to ■#1B1722. The contrast ratio (the relative lightness difference between text or a visual component and its background) is about 5.04:1, which exceeds the 4.5:1 minimum for normal-size text.

■#FF00BF against ■#FAF7FC has a contrast ratio of about 3.29:1, so it exceeds 3:1 when the color surface is used to identify a button or selected category against the light background. Use ■#1B1722 for body text and template names; against the background it has a contrast ratio of about 16.59:1. For a secondary “View Details” button, use ■#314B70 as the background with ■#FFFFFF text. That pair is about 8.86:1, while Deep Indigo against the page background is about 8.34:1.

■#FF00BF against ■#FFFFFF is about 3.50:1, so white should not be used for normal-size text on a magenta surface. WCAG (Web Content Accessibility Guidelines) 2.2 requires at least 4.5:1 for normal-size text. When a meaningful UI (user interface) component such as a button or selected control needs a color boundary to be identifiable, at least 3:1 against the adjacent color is the relevant minimum.

To keep the look vivid, do not communicate selection with magenta and indigo alone

■#FF00BF and ■#314B70 have a contrast ratio of only about 2.53:1. Do not therefore rely on these two adjacent colors alone to communicate “Selected” and “Unselected,” or “Recommended” and “Standard.” Add category text, check marks, heavier borders, or labels. If template thumbnails already contain a lot of red-violet or pink, leaving more ■#FAF7FC space is generally more useful than covering the whole card with magenta, because it helps separate the thumbnail from the controls.

In HueRoll, you can enter ■#FF00BF as a HEX color code (a web color notation beginning with #), then review related colors, color-scheme suggestions, and the selected color’s contrast against white and black. HueRoll does not automatically compare arbitrary pairs of colors or judge AA/AAA conformance, so the two-color contrast ratios in this article were calculated separately.