At the moment, I have a dropdown trigger within the navbar of my website. I want it to have a little bit of "niceness" to it whenever a user hovers of it (to indicate that the element is indeed clickable).

This is what I have so far (when the use hovers over the element):

Hover over element

Navbar: #151515 Hover: #7b7b7b Text: #e6e6e6 Profile Picture (Background): #c0c0c0

At the moment, I feel like the dark grey is a bit too intense (and it kind of overpowers the overlaying elements). And due to the way Chrome renders these colors (and the text), and it looks disgusting, in my opinion.

The main color for the website is #730aa2 (dark ish purple), so I tried fading in between a darker version of that & a lighter version, but none of them worked.

Would anyone have any color codes (HEX or RBG) that you think would suit as an underlaying hover color?


1 Answer 1


Since It is a website you have mentioned, you can place your sign in button on the far right side of your navbar.

You have also decided on your primary color, so using grey color on your sign in button/drop-down hover surprises me considering that it is an important CTA in your website.

I would suggest go with your primary color and use it on sign in CTA not only on hover but as default color something like this.

enter image description here

hope this helps.

  • Would you mind tell me where you found that user icon? :)
    – GROVER.
    Jan 7, 2017 at 18:12
  • glad I could help :) user icon you can find in flaticon.com
    – prazor9
    Jan 7, 2017 at 18:15
  • Also don't forget touch devices can't hover!
    – Martyn
    Jan 8, 2017 at 1:33
  • @Martyn yeah, it's going to be a click-to-activate dropdown menu :-)
    – GROVER.
    Jan 8, 2017 at 3:26
  • I can't manage to find the icon on flaticon.com.. would you happen to have a link to it? @prazor9
    – GROVER.
    Jan 8, 2017 at 3:37

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