How to Choose Button Colors for a Website | Color Scheme Tips to Make Buttons Stand Out

Making every website button brightly colored does not necessarily make the interface easier to use. Different visual weights can help visitors see which action matters most. Consider a public facility’s reservation management page with three choices: “Save changes,” “Discard edits,” and “Cancel reservation.” Their colors should communicate different priorities without relying on color alone.

Emphasize the Main Action and Make Supporting Actions Quieter

Start by deciding which action the page primarily asks visitors to complete. “Save changes” is the main action here, so it can have a solid, high-contrast button. “Discard edits” is a secondary action. It can remain on a white background with a clearly visible border rather than competing with another solid-colored button. When both actions are equally prominent, it may be less obvious which one moves the task forward.

“Cancel reservation” is different again because it may undo a booking. Separate it from the Save button instead of giving both the same appearance. A red accent can help distinguish the cancellation action, but its label and a confirmation step should explain what will happen. The button color supports the meaning of the action; it cannot replace the words.

Three Button Color Roles on a Reservation Editing Page

The following values are HEX codes, a hexadecimal way of specifying colors on the web. A contrast ratio measures the difference in relative lightness between two colors. Use a pale blue-gray ■#F3F6F9 behind the page, white ■#FFFFFF for its editing panel, and dark blue-gray ■#253342 for headings and explanatory text. The text-to-white-panel contrast ratio is approximately 12.88:1.

“Save Changes”: Solid Deep Blue

Use a restrained deep blue ■#165D83 for the button fill and white ■#FFFFFF for the label. The text-to-button contrast ratio is approximately 7.17:1. The blue fill also contrasts with its immediate white panel ■#FFFFFF at approximately 7.17:1. Reserve this treatment for the actual saving action rather than applying it to every button on the page.

“Discard Edits”: White with an Outline

Keep the secondary button white ■#FFFFFF, use muted blue-gray ■#49697E for its text, and add a darker blue-gray ■#536D80 border. The label contrasts with white at approximately 5.82:1, and the border contrasts with white at approximately 5.43:1. Its outline identifies the button without giving it the same solid visual weight as Save.

“Cancel Reservation”: An Outlined Warning Action

For cancellation, use deep red ■#9A2B3B on the text and border, with a white ■#FFFFFF interior. Red against white has approximately 7.55:1 contrast. Place this control in a separate area, such as below the editing actions, and let visitors review the consequences before cancellation is confirmed.

Design Hover, Focus, and Unavailable States Together

Hover is the state when a mouse pointer rests over an element. The Save button can deepen to ■#104A69, where white text ■#FFFFFF has approximately 9.52:1 contrast. For the secondary button, a pale blue-gray hover background ■#EAF0F4 retains approximately 5.07:1 with its text ■#49697E and approximately 4.72:1 with its border ■#536D80. A pale red hover background ■#FCEDEF for the cancellation button retains approximately 6.65:1 with the dark red text ■#9A2B3B.

Focus means a button is currently targeted for keyboard or similar interaction. An additional dark navy outline ■#143B59, slightly offset from the button, contrasts with white ■#FFFFFF at approximately 11.67:1 and with the pale page background ■#F3F6F9 at approximately 10.76:1. Make the focus state noticeable through its outline shape and position as well as its color.

If a button is unavailable, merely fading its color is not enough to explain why it cannot be used. Tell visitors what information is missing or what needs to happen first. On phones, conventional mouse hover is absent, so also check the feedback after tapping. Under WCAG 2.2 (Web Content Accessibility Guidelines) Level AA, normal-sized text generally needs at least 4.5:1 contrast against its background. Essential non-text cues identifying controls or their states need at least 3:1 against adjacent colors, but that does not mean every button must have a border.