How to choose a color combination for main header and sub-headers for better UI and UX?

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?