What's your method for choosing button colors?

Question

I realized this has been discussed in different threads, but often what I've found is the topic is segmented into only a couple of actions; i.e. Save and Cancel, or Positive/Negative relationships.

What I'm asking about is – what is your overall system-wide strategy for choosing button colors? For example: If your "positive" action color is green, and your "destructive/negative" action color is red, what color would you choose for an "Add" action? Do you consider that a positive action? Or, is that a neutral action? How about a "Learn more" button? An "Edit" button?

Suppose you have a "primary" button color (let's call it a bright orange) that is a unique brand/site color. When would you choose to use the bright orange button over say, a neutral (gray) or the positive green color? Or perhaps would you replace all positive action colors with the brand color?

Do you choose your button colors based on the context/view or need of that screen (to create contrast, importance, etc.), or are you orchestrating it with consistency and without exception throughout the product/site?

Thanks for sharing your thoughts, and hopefully I haven't confused anyone.

Answer 1

We use the standard "Primary" "Secondary" "link elsewhere/escape" for our actions and never use red and green. Reason red and green is never used is because they may place un-intentional emphasis on the wrong things.

e.g. We have a button for deleting an item. This is not a common action, yet if we make it red, this is the one thing we're drawn to on the screen. Because it's destructive, we still need to put in a confirmation modal or undo functionality anyways. So the red is unnecessary clutter interrupting page flow.

Same thing for using green for positive actions.

e.g. Suppose we use green for "Adding". Suppose on the screen, we have multiple items we can add. Maybe they are different type of items or maybe they're just the same item but in different position because you're editing a list. If you use green for those add buttons, it becomes clutter because green is found every where. Emphasis only works if it's applied selectively with contrast.

It's much better to stick with the standard, make the single most common action Primary, other actions with a lighter Secondary color. If you're on a web interface, a link might work for "cancel" or other "escape" type actions to further de-emphasize them from Secondary actions.

Answer 2

Do you choose your button colors based on the context/view or need of that screen (to create contrast, importance, etc.), or are you orchestrating it with consistency and without exception throughout the product/site?

Both. Because if you're consistent throughout all the product/site design, "that screen" will share the general design of the others, in consequence, the buttons will be also consistent between all screens.

If your "positive" action color is green, and your "destructive/negative" action color is red, what color would you choose for an "Add" action?

The thing here is thinking the design the other way around, IMO the way to go is first thinking what set of colors you'll use for the UI, and just then, decide if applying some "positive/negative" colors is suitable/visually compatible with your general interface.

If your interface uses colors for buttons that have an implicit meaning (red/green case), you could use a neutral color (achromatic ones for example, or anyone discrete according to your set of colours) to differentiate the less significant action. Facebook example:

But there is not a imperative need of differentiating action buttons with color, I think how you express the messages and the text of the buttons is more important. Look at this:

The result of the actions are not clear, so even if you change the color of the buttons in any way you want, it won't fix the problem.

If your site design "allows you" to make a color differentiation that will enhance the perception of the action of the button, of course it's better than using the same colors, but if it doesn't, it's not a big issue.