I'm always confused about the BG (background) colors or a header and sub-header of a website or an app.
There can be at least 3 options to choose BG for them:
1. A dark color for main header and a light version of same color for sub-header BG
2. A dark color for sub header and a light version for main header
3. Same colors for both
Now, I can choose any of them, but have doubts about all of them:
1st - Dark BG for main header makes the users feel it below (in terms of z-axis) the other content including sub headers. Also, Logo and menu bars are noticed later as compared to sub-headers
2nd - Despite more focus on main header (due to light), overall page looks little ugly
3rd - Same colors for both makes the color redundant
Currently, I consider option 2 to be little better than other two.
These are just my opinions. Is/are there really such thing(s) (I would also appreciate if one can provide a resource to read more about it)?
If yes, which would be a better option, keeping in mind both UI and UX?