What Colors Go with Brilliant Magenta? Color Combinations That Give Intense Red-Violet a Glamorous, Cohesive Look [#F764D2]

Brilliant Magenta (■#F764D2) is a bright, vivid red-violet between red and purple. On a localization editor—a screen for translating and adapting app or website text for different languages and regions—it can work well when it is limited to the selected source string, the primary “Save translation” button, and the active language tab. This gives the intense red-violet a glamorous, cohesive role while keeping source text, translations, and status information easy to organize. This example pairs it with Deep Navy, Pearl White, and Muted Sage.

Use Deep Navy as the base, then separate the red-violet’s roles with white and sage

With ■#F764D2, one practical combination is Deep Navy ■#1A2030 for the overall screen and string-list background, Pearl White ■#F9F7FC for source text, translations, and supporting information, and Muted Sage ■#92B48D for secondary actions such as opening the glossary or reviewing comments.

■#1A2030 is a dark, low-saturation navy, so it creates a large lightness difference from the bright magenta. ■#F9F7FC is a near-white light color, so standard information such as source strings, translations, character counts, and notes can be shown without competing with the main color. ■#92B48D is a muted green. Its hue—the basic color family such as red, blue, or green—is separated from magenta, so actions such as “Open glossary” or “Review comments” can be distinguished from the primary save action.

In translation editing, use Brilliant Magenta for the selected string and save action

For a practical layout, use ■#1A2030 for the overall screen and unselected string cards, then use ■#F9F7FC for source text, translations, character counts, and assignee names. Their contrast ratio—a numerical measure of the relative brightness difference between foreground and background—is about 15.26:1.

Use ■#F764D2 for the selected string card, the primary “Save translation” button, and the active language tab, with ■#1A2030 for text and icons. Their contrast ratio is about 5.96:1, above the 4.5:1 minimum for normal-size text. The magenta surface against the dark background has the same ratio of about 5.96:1, so selected cards and primary buttons also have more than a 3:1 difference from the background.

For secondary buttons such as “Open glossary” or “Review comments,” use ■#92B48D as the background with ■#1A2030 text. Their contrast ratio is about 7.06:1. Muted Sage against the screen background is also about 7.06:1.

WCAG (Web Content Accessibility Guidelines) 2.2 requires a contrast ratio of at least 4.5:1 for normal-size text. Visual information needed to identify meaningful UI (user interface) components or graphical objects requires at least 3:1 against adjacent colors.

For a glamorous, cohesive look, do not rely on white text or magenta-versus-sage color differences alone

■#F764D2 and ■#FFFFFF have a contrast ratio of about 2.72:1, while ■#F764D2 against ■#F9F7FC is about 2.56:1. Avoid normal-size white or Pearl White text on the magenta background; this example uses ■#1A2030 instead.

In addition, ■#F764D2 and ■#92B48D differ by only about 1.19:1. Do not use those two colors alone to communicate states such as “untranslated,” “translated,” “awaiting review,” or “approved.” Pair color with status text, check marks, review icons, and assignee information. In HueRoll, you can enter ■#F764D2 as a HEX color code (a Web color code beginning with #), then review related colors, palette suggestions, and the selected color’s contrast against white and black. HueRoll does not compare arbitrary pairs of colors or automatically determine WCAG AA or AAA conformance, so the two-color contrast ratios in this article were calculated separately.