What Colors Go with Brilliant Purple? Color Pairing Examples That Give Vivid Purple a Dramatic Look [#E464F7]

Brilliant Purple (■#E464F7) is a bright, vivid purple with a warm red cast. On a storyboard—a screen where video or film scenes are arranged in sequence to plan the structure—it can work well when it is limited to the selected scene, the primary “Add scene” button, and the shot number currently being edited. This gives the vivid purple a dramatic role while keeping dialogue, duration, and notes easy to organize. This example pairs it with Cool Lilac White, Ink Plum, and Deep Teal.

Use Cool Lilac White as the base, then tighten the purple with dark plum and teal

With ■#E464F7, one practical combination is Cool Lilac White ■#F8F7FB for the editing canvas and unselected scene backgrounds, Ink Plum ■#211B2A for scene names, dialogue, duration, and primary-button text, and Deep Teal ■#2F6170 for secondary actions such as previewing the storyboard or opening scene settings.

■#F8F7FB is a very light color with a slight violet cast, so it keeps multiple scene cards and note areas feeling light. ■#211B2A is a dark, low-saturation color with a slight violet cast, so scene names, dialogue, duration, and production notes can stay quieter than the main purple. ■#2F6170 is a muted blue-green. Its hue—the basic color family such as red, blue, or green—is separated from purple while its vividness stays restrained, so actions such as “Preview storyboard” or “Open scene settings” can be distinguished from the primary add action.

On a storyboard, use Brilliant Purple for the selected scene and primary action

For a practical layout, use ■#F8F7FB for the editing canvas and unselected scene cards, then use ■#211B2A for scene names, dialogue, duration, assignees, and notes. Their contrast ratio—a numerical measure of the relative brightness difference between foreground and background—is about 15.69:1.

Use ■#E464F7 for the selected scene card, the primary “Add scene” button, and the shot number currently being edited, with ■#211B2A for text and icons. Their contrast ratio is about 5.95:1, above the 4.5:1 minimum for normal-size text. However, ■#E464F7 against ■#F8F7FB is only about 2.64:1, so the purple fill alone should not define selected-card or button boundaries on the light background. Use a ■#211B2A border or check icon as well. That border against the page background is about 15.69:1.

For secondary buttons such as “Preview storyboard” or “Open scene settings,” use ■#2F6170 as the background with ■#FFFFFF text. Their contrast ratio is about 6.85:1. Deep Teal against the page background is about 6.42: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 dramatic look, do not rely on white text or purple-versus-teal color differences alone

■#E464F7 and ■#FFFFFF have a contrast ratio of about 2.81:1, so normal-size white text should not be placed on the purple background. Use ■#211B2A for primary-button text instead.

Also, ■#E464F7 and ■#2F6170 differ by only about 2.44:1, so do not use those two colors alone to communicate “not started,” “editing,” “awaiting review,” or “complete.” Pair color with status text, shot numbers, check marks, and review icons. In HueRoll, you can enter ■#E464F7 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.