The best button colors for websites to use are the ones that stand out the most. Let me explain.
You want your buttons to be clicked. Before they can be clicked, they have to be noticed. In order to maximize the chances of users noticing your buttons, they need to draw attention to themselves. The best way to do this is to choose a color that is on the opposite side of the color wheel.
Complimentary Colors Are the Best Button Colors for Websites
The term "complimentary color" refers to the color that is on the opposite side of the color wheel. Complimentary colors have the highest contrast and we, as humans, visually process contrast first.
By using varying shades of one color for the majority of your website, you unify all of that content into one low-contrast entity. If you have a green website and use green buttons, all of the greens blend together due to the low contrast. However, if your mostly green website changed the button colors to a red, the red buttons would immediately draw attention due to the high contrast.
An Example of the Best Button Colors
Let's use my homepage as an example. You'll notice that the backgrounds, graphics, and details all use various shades of blue. On a side note, I chose these blues using this shade generator--it's a super handy tool!
Anyways, since my homepage is mostly blue, the best button color to use is orange. Orange is blue's complimentary color. It's on the opposite side of the color wheel and stands out the most. In my case, I didn't use the perfect opposite orange, I used the orange from my brand colors. This color scheme helps me not only with branding, but also with conversion rate optimization.
Here's what it would look like if I used my blue brand color for the buttons.
Compare the last image to my actual website with the orange buttons (the complimentary color of blue).
How to Find the Best Button Color for Your Website
If you want to get the perfect contrasting color, I recommend using this color wheel tool from Adobe. You'll need the hex code for your specific color scheme on your website, or you can just approximate it by clicking around on the color wheel. Make sure you select "complimentary" on the side bar.
