How to Use Indigo and Orange: Color Scheme Principles for Making Buttons Stand Out

Indigo and orange can combine a calm blue-violet background with a brighter accent. But an orange button will not stand out equally well everywhere. To make the main action noticeable, choose the button fill and text together with the color directly around it. These two examples compare a webinar registration section with a light pricing and information page.

Choose the button color by its contrast with the surrounding background

For these examples, we use deep blue-violet indigo ■#29356F and warm orange ■#F5A43E. They are proposed design shades, not the only valid digital values for their color names. A HEX code is a hexadecimal value used to specify an exact web color and keep backgrounds, lettering, and buttons consistent.

The contrast ratio—a measurement of the difference in relative lightness—between these two colors is approximately 5.60:1. That means an orange button can be visibly distinct on an indigo background. The lettering still needs a separate check: white ■#FFFFFF on orange has only about 2.05:1 contrast, which is too low for ordinary text. Indigo lettering on the same orange button provides about 5.60:1.

Two button palettes for different background colors

A webinar hero section: an orange registration button on indigo

For the opening section of a webinar page, use indigo ■#29356F across the background, warm off-white ■#F8F7F2 for the heading, and white ■#FFFFFF for supporting copy. The heading and background have about 10.68:1 contrast, and the white text has about 11.46:1. Make “Register for the webinar” the single main action and put its orange ■#F5A43E button directly below the introduction.

Use indigo ■#29356F on the button as its text color. The lettering contrasts with the orange fill at approximately 5.60:1; the same ratio separates the button fill from the surrounding indigo section. If a photograph is part of the hero layout, keep the button over a solid indigo area rather than on the photo, where the neighboring brightness can change.

A pricing information page: an indigo button on a light background

For a page comparing plans or explaining a service, choose warm off-white ■#F8F7F2 as the background, indigo ■#29356F for headings, and dark gray ■#2C3341 for the body text. The contrast ratios against off-white are approximately 10.68:1 for headings and 11.82:1 for body copy. Fill the primary “Request information” button with indigo ■#29356F and set its text in white ■#FFFFFF. Text-to-button contrast is about 11.46:1, while the button differs from the off-white page by about 10.68:1.

Limit orange ■#F5A43E to a short label such as “Applications open,” with indigo ■#29356F lettering. However, orange against off-white differs by only about 1.91:1, so the label may not have a clear outline. Add an indigo border when that boundary matters, and keep the explanatory words. If you want the primary button itself to be orange, placing it on an indigo band is another way to increase the difference around it.

Check the button label, outer boundary, and interaction states

Inspect two relationships separately: the label against the button fill, and the button against its adjacent background. A button filled with indigo can blend into a same-colored indigo section, even though white text inside the button remains readable. Conversely, orange on a pale page may look colorful without providing a strong light–dark boundary. Use a contrasting outline, adequate space, and specific action wording where needed. Review the spacing again on smaller screens.

Under WCAG 2.2 (Web Content Accessibility Guidelines) Level AA, normal-sized text requires at least a 4.5:1 contrast ratio and large text at least 3:1. Visual information needed to recognize a button or its keyboard focus state can also require 3:1 contrast against adjacent colors. HueRoll lets you enter HEX colors, explore palette suggestions, and compare a selected color against white and black. It cannot check arbitrary two-color pairs or automatically determine AA or AAA compliance, so verify the finished combinations using a separate contrast check.