What Colors Go with Rich Indigo? A Color Scheme to Give Deep Blue-Violet a Weighty, Refined Look [#2914B8]

Rich Indigo (■#2914B8) is a deep blue-violet built on a blue base with a noticeable purple undertone. On a website, it can work well for certification courses or members-only learning portals, especially for course titles, the current lesson, and a primary “Continue learning” button. Used this way, the color can keep some vividness while giving the interface a more substantial, refined appearance. If indigo is spread across large backgrounds and several controls at once, however, it can become more visually prominent than the lesson content or progress information. A light base and restrained secondary colors help separate those roles. Here, we pair Rich Indigo with Pale Lavender Gray, Charcoal Indigo, and Sand Gold to give the deep blue-violet a weighty, composed look.

Use Pale Lavender Gray as the base and Sand Gold to add a warm counterpoint to blue-violet

One practical combination pairs ■#2914B8 with Pale Lavender Gray ■#F8F6FA for the background, Charcoal Indigo ■#292736 for body and supporting text, and Sand Gold ■#C9B98C for secondary controls.

■#F8F6FA is a very light color with a faint purple tint, so it keeps a visual relationship with Rich Indigo while creating a large difference in lightness. ■#292736 is a low-saturation dark color with a subtle blue-violet cast, making it useful for lesson text, deadlines, progress percentages, and notes without turning every element indigo. ■#C9B98C is a muted yellow-leaning color. Its hue sits away from blue-violet while its saturation stays restrained, so it can introduce a gentle warm contrast without competing strongly with the main indigo.

In a learning portal, concentrate Rich Indigo on the current location and primary action

For a practical layout, use ■#F8F6FA across course lists and lesson content, then apply ■#2914B8 to the course title, the current lesson, and the background of a primary “Continue learning” button. Text on that indigo background can use ■#F8F6FA, which provides enough contrast for normal-sized text. Lesson content, deadlines, progress percentages, and supporting explanations can use ■#292736 so indigo stays focused on the user’s current position and the main action.

For secondary UI (user-interface elements such as buttons and progress controls), a ■#C9B98C “View completion requirements” button or label can sit on a dark ■#2914B8 band or panel, with its text in ■#292736.

A contrast ratio expresses the difference in relative luminance between text or a UI element and its background. ■#2914B8 against ■#F8F6FA is about 10.37:1, ■#292736 against ■#F8F6FA is about 13.60:1, and ■#292736 against ■#C9B98C is about 7.51: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, ■#2914B8 against ■#C9B98C is about 5.73:1, which exceeds the 3:1 contrast needed for visual information required to identify a meaningful UI component against the adjacent indigo area.

For a weighty look, do not communicate progress or completion with indigo and gold alone

■#C9B98C against ■#F8F6FA is only about 1.81:1. For that reason, avoid using the Sand Gold fill by itself to show the boundary of a button or progress element on the light background. Add a ■#292736 border, text, or another clear visual boundary.

Likewise, states such as “in progress,” “completed,” and “expired” should not rely only on indigo-versus-gold color differences. Pair color with state text, a check mark, a numeric progress value, a stronger border, or another non-color cue. If course covers or lesson thumbnails already contain a lot of blue-violet, leaving generous ■#F8F6FA space can separate the learning content from the controls better than extending ■#2914B8 across the whole page. In HueRoll, you can enter ■#2914B8 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.