2

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

Image

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?

Improve this question

1 Answer 1

Reset to default
2

When you look out across a landscape with the eye of an artist, you will notice that things that are further away will have a more blue/grey tinge to them than when they are closer (some would describe these as "cooler" colours). Artists use this effect in paintings to create the illusion of depth in something that would otherwise look 2D.

The colours that you choose to demarcate areas of a screen can also trigger the same effect of depth. The lighter blue is much warmer. I suspect that this is why none of the above options feel quite right.

Do you want everything to feel flat, and yet still have different colours for the header and sub-headers? Then try to pick colours that have a similar "colour temperature".

Improve this answer
8
  • Yes, I need flat design with different colors for header and sub header. Any example for colors having similar temperature? You mean two colors which don't have a large difference in them?
    – Vikas
    Sep 18, 2018 at 15:16
  • @VikasKumar That is tricky to describe. I think if you look in any standard colour picker control, you can choose the colour that you want from the grid, and then there is a second control (a vertical slider) that you can use to add more white to it. If you pick the dark blue you want, and then use the slider to create the lighter blue, you should get 2 blues that look distinct, yet have a similar temperature.
    – Franchesca
    Sep 18, 2018 at 15:27
  • Okay thanks. But still my doubt stays there. Provided I use similar temperature colors, header should have darker or lighter version in your experience?
    – Vikas
    Sep 18, 2018 at 15:34
  • Interesting, I learned something with your answer. Anything backing this example?
    – asiegf
    Sep 18, 2018 at 16:16
  • 1
    @asiegfried The effect is known as aerial perspective. With eyes on the front of our heads we have good depth perception within a certain range, but beyond this our brains have to make a bunch of assumptions based only on 2D info such as colour and sharpness. These assumptions still get applied when looking at a painting or a computer screen.
    – Franchesca
    Sep 19, 2018 at 7:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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