0

I have this project, where I have to implement text, raised and ghost buttons depending on the different sections. It's kind of a wizard-style app, with a dashboard with steps to complete and submit.

So this app serves to different clients, and with each client, comes the main color which is the brand color of the same before. It is used mostly in the header of the app to generate loyalty with the customer's brand.

There are exceptions, of course, as the icons colors. i.e. Red for 'caution', 'error' or 'delete'.

My question is, how I choose color rules for the buttons when the main brand color may vary depending on the customer?

For example, what do I do when the main color of the customer is red? (in terms of usability) or in an extreme case, light yellow?

The main background of the dashboard is white and light gray for the body.

Image example: enter image description here

Thanks

Improve this question
2
  • 1
    It's a little unclear; are you saying that you want to change the primary action buttons to match with the customers main brand color? And what do the buttons do?
    – Mike M
    Commented Mar 26, 2019 at 16:31
  • Not to "match" with the main brand color but to have a "neutral color" for all kind of color may be (referring to the different customers). There are buttons that obviously have the corresponding colors to their actions (ie. delete or cancel in red) but these ones are like "add or create", next, back, configure, modify, etc.. Also I edited the question so it's more clear.
    – IndPendent
    Commented Mar 26, 2019 at 18:03

1 Answer 1

Reset to default
1

If I understand correctly, the customer will be able to pick a color for the header background, etc. I can think of a couple ways.

  1. Only allow certain number of color choices. You can then create/find an algorithm that will give you the contrast of the picked color and then color the icons with it.

  2. Put the icons in a container with fixed colors and the container itself is never colored

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.