What is a good color to use for a button that will be put on an HTML page that uses this dark background color: #404040 ?

I looked at various shades using Adobe's Kuler of the above mentioned background color (#7F7F7F, #FFFFFF, #E5E5E5) and I'm thinking about making a PhotoShop button using #7F7F7F.

Any advice would be greatly appreciated. Thanks in advance.

1 Answer 1


In terms of usability, the issue's more about prominence than color alone, so it depends how you're designing the button besides color (things like size, depth, patterns, font colors/shade, whatever makes it "pop" out.). It will also depend on the type/purpose of the button.

Call to action buttons should be as prominent as possible without hurting the user's eyes and making other content difficult to focus on.

Navigation buttons can, and arguably should, be subtle, so long as the navigation as a whole is apparent.

For any sort of navigation, you only need it prominent enough the user knows it's a link. I like to add very prominent hover states to navigation buttons. What should be more prominent than an item that you know the user is focussing their attention on at that moment?

In summary, if your designing for your navigation buttons right now, I would keep them a similar color to your background (of the navigation itself), and have prominent hover states.

  • +1 Thank you, very helpful info, especially for the advice on the prominent hover states.
    – Anthony
    Commented Aug 20, 2013 at 16:24

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.