What Colors Go with Mist Magenta? Color Pairing Examples That Make Soft Reddish Purple Look Vibrant [#F2E3EE]

Mist Magenta (in HEX, a web color code that begins with #, ■#F2E3EE) is a very light, softened reddish purple. On a creator portfolio project grid, limiting it to a featured-work label, the selected category, and the main “View project” button can keep the pale reddish purple as the focal color while giving the page a more vibrant look. This example pairs it with deep plum, lavender white, and muted olive.

Anchor the text with deep plum and separate supporting actions with olive

With ■#F2E3EE, one option is ■#4C3850, called deep plum here, for headings and body text; lavender white ■#FCFAFC for the page background; and ■#566B4E, called muted olive here, for secondary actions such as viewing a profile or filtering work.

■#4C3850 is a dark color with a purple cast. It stays relatively close to Mist Magenta in hue (the basic family of color, such as red, blue, or green) while creating a much larger lightness difference. ■#FCFAFC is nearly white with a slight violet cast, so it can cover large areas containing project images and descriptions without competing strongly with the pale reddish purple. ■#566B4E is a subdued green that can separate secondary actions such as “View profile” or “Filter work” from the reddish-purple primary action by hue.

Use Mist Magenta for featured work and the selected category

Set the page background and regular project cards to ■#FCFAFC, and use ■#4C3850 for project names, summaries, and role descriptions. The contrast ratio (a measure of the relative brightness difference between foreground and background colors) is about 10.17:1.

For a featured-work label, the selected category, and the main “View project” button, use ■#F2E3EE as the background with ■#4C3850 for text and icons. The contrast ratio is about 8.55:1, above the 4.5:1 minimum for normal-size text.

However, ■#F2E3EE against ■#FCFAFC is only about 1.19:1. Pale fills alone therefore do not make featured or selected states easy to distinguish. Add a ■#4C3850 border, a “Featured” or “Selected” label, and an icon. That border against the page background has a contrast ratio of about 10.17:1.

For a secondary button such as “View profile,” use ■#566B4E as the background with ■#FFFFFF text. The contrast ratio is about 5.82:1. The difference between ■#566B4E and ■#FCFAFC is also about 5.60:1, helping primary and secondary actions remain visually distinct.

WCAG (Web Content Accessibility Guidelines) 2.2 requires a contrast ratio of at least 4.5:1 for normal-size text. For visual information required to identify UI (user interface) components and states, the non-text contrast criterion uses a 3:1 minimum against adjacent colors.

For a vibrant look, do not communicate emphasis with pale reddish purple alone

■#F2E3EE against ■#FFFFFF has a contrast ratio of about 1.24:1. Normal-size white text on a Mist Magenta background therefore does not reach 4.5:1. In this example, the primary button uses ■#4C3850 for its text instead.

Also avoid communicating states such as “Featured,” “Selected,” or “Published” by color alone. Pair color with status text, borders, and icons. Rather than covering the entire page with Mist Magenta, reserve it for featured work and primary actions, and leave generous ■#FCFAFC space around those elements. This helps the pale reddish purple remain the main color without competing too strongly with the project imagery. In HueRoll, you can enter ■#F2E3EE and review related colors, palette suggestions, and the selected color’s contrast with white and black. HueRoll does not compare arbitrary pairs of colors or automatically judge WCAG AA or AAA conformance, so the two-color ratios shown in this article were calculated separately.