For consistency and to make users recognize quickly clickable links/buttons, "the color of a button should depend on its state and its purpose"*.

In the case of the hamburguer button it does not behave as a link but it needs to call to action as links do.

Based on this I would think that it makes more sense to display it with the same color as the links, but in general I see this button in a different color than links, (more like in the text color) e.g.:

enter image description here

So what is the right path to follow?


In short, not unless you want it to.

Links are generally coloured so that they stand out from all the other non-linked text.

Buttons may have alternate colours to signify differences in function or state.

The hamburger menu is usually in an area of it's own and has a distinctive shape. It doesn't need to stand out from a lot of other hamburger-shaped items and doesn't really have any alternate sates or functionalities that might be presented together so there is no real need to colour it unless you really want to.

  • 1
    This is true, just wanted to say in the case it was next to other icons giving color to one of them would make all the others look disabled. So the same rule "color=>stand out" doesn't necessarily translate to icons.
    – Alvaro
    May 15 '17 at 12:23
  • @Alvaro Very true! May 15 '17 at 12:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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