What Colors Go with Vivid Indigo? Color Pairings That Make Intense Blue-Violet Look Cool [#3B1FFF]

Vivid Indigo (■#3B1FFF) is a blue-violet with high saturation, meaning strong color intensity, and a strong blue base. On a code review screen—a workspace for checking changes to a program—it can work well when it is limited to the selected file, the current diff (the changes between versions), and the primary “Submit review” button. This keeps the intense blue-violet looking cool while leaving code and comments easy to scan. This example pairs it with Ice Blue, Slate Navy, and Pale Aqua.

Use Ice Blue as the base, then organize the blue-violet with dark navy and pale aqua

With ■#3B1FFF, one practical combination is Ice Blue ■#F5F7FF for the page background, Slate Navy ■#0F172A for body copy, file names, and line numbers, and Pale Aqua ■#BFE9E4 for review notes and tips.

■#F5F7FF is a very light color with a slight blue cast, so it can keep a large code-and-comment area feeling light while creating a clear lightness difference—the difference in how light or dark the colors appear—from the indigo. ■#0F172A is a low-saturation dark navy that can organize file names, changed lines, line numbers, and explanations without competing with the main color. ■#BFE9E4 is a pale blue-green. Its hue—the basic color family such as red, blue, or green—is separated slightly from the indigo, while its saturation stays restrained, so it can add variation to supporting information without competing with the primary action.

On a code review screen, use Vivid Indigo for the current location and primary action

For a practical layout, use ■#F5F7FF for the page and unselected file-list background, then use ■#0F172A for file names, comments, line numbers, and change explanations. The contrast ratio—a numerical measure based on the relative luminance of foreground and background—is about 16.69:1.

Use ■#3B1FFF for the selected file tab, the heading for the diff currently being reviewed, and the primary CTA (call to action, such as submitting the review). Put ■#FFFFFF text on top. Their contrast ratio is about 7.43:1, which is above the 4.5:1 minimum for normal-size text. The difference between ■#3B1FFF and ■#F5F7FF is about 6.95:1, so the indigo surface can also provide strong visual separation from the light background where that boundary is needed.

For a small “Review note” or “Check this” panel, use ■#BFE9E4 as the background, with ■#0F172A for both the text and border. The text contrast is about 13.59:1. Pale Aqua against the page background is only about 1.23:1, so the fill color alone should not be used to define the panel boundary. The ■#0F172A border against the ■#F5F7FF page background is about 16.69: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 cool look, do not use blue-violet alone to communicate additions, deletions, or review state

A code review can contain added and deleted lines in a diff, as well as states such as “unreviewed,” “reviewed,” and “changes requested.” If all of these are separated only by lighter and darker versions of ■#3B1FFF, the meaning can become difficult to follow. Pair color with plus and minus symbols, text labels, icons, and borders. In particular, additions and deletions should remain distinguishable through symbols or wording as well as color.

■#3B1FFF and ■#BFE9E4 differ by about 5.66:1, so an aqua supporting label near an indigo band can be visually separated from it. However, the aqua has weak contrast against the light page background, so it should not be used as an unbordered surface when that boundary needs to be perceived. In HueRoll, you can enter ■#3B1FFF 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.