0

I am currently working on redesigning a web app and want to reduce the amount of colors used, espcially the lot of different grey tones - warm and cool mixed up as accents for UI elements and the background.

Is it a good idea to mix warm and cool grey tones in the UI of an application (web or desktop) and if so, how similar are they allowed to be? Or is there a best practice? Especially in combination with a small set of accent colors?

Personally, I feel like it is a bad idea - as different warm/cool grey tones (both used as 'background accents' somehow don't go too well together in my aesthetics. But as a designer I don't just want to rely on personal opinions. So, are there any rules of thumb or guidelines to follow?

|improve this question

closed as primarily opinion-based by Andrew Martin, Wanda, maxathousand, locationunknown, Shreyas Tripathy Sep 7 '18 at 8:34

Many good questions generate some degree of opinion based on expert experience, but answers to this question will tend to be almost entirely based on opinions, rather than facts, references, or specific expertise. If this question can be reworded to fit the rules in the help center, please edit the question.

  • 1
    This question is better suited to Graphic Design stack. graphicdesign.stackexchange.com – RobbyReindeer Sep 6 '18 at 11:41
  • 1
    Colour psychology is very important for UX. I think it's fine here if your colour choices are about improving the user's experience. There is an overlap as a lot of UX is Graphic Design. – Invariant Change Sep 6 '18 at 11:49
  • 1
    Thanks for your remark - and yes, I want to improve things like the feel of reliability through proper color usage. – Sanguinik Sep 6 '18 at 11:57
  • Warm greys (with a tiny percentage more red) and cool greys (with a tiny percentage more blue) do not offer enough contrast against each other to be very noticable. If you're talking about using one as background and the other as foreground or about using the different tones to represent different areas or modes of operation... then you don't have enough contrast and should rethink your design. If, on the other hand, you're talking about bringing some nuance to the visual design, then you should try over on the graphics stack exchange. – Andrew Martin Sep 6 '18 at 14:12
  • Hey Andrew - I have the situation that I have an existing application (I haven't designed it) that has warm/cool greys that somehow should separate background and foreground, but are used also mixed in the forground and I want to get rid of it - I was just wondering if it makes sense in some way. And I already reached out with my question to the graphic's stack exchange. Thanks! – Sanguinik Sep 6 '18 at 14:18
1

Note: This answer is anecdotal, as it is based purely on my personal experience. Feel free to edit if you have studies or well known principles to support our undermine my point.

TL,DR; Do not mix warm and cold greys, of you do not want a "muddy" look.

What I've noticed during my work as an illustrator is that colour choice is often more about relative contrasts than about the absolute colour on its own, and this is the case for aspects like size, saturation, value, composition etc. too.

So let's look at the context:

  • If your work only contains desaturated and middle-to-low value colours, you can work with each of the greys as you would with the saturated, lighter version of those colours (all scaled up linearly). It'll probably be easier to work with bright colours, see what fits, and then dull it down. This will have other problems of low saturation image, but that's not in the scope of this question I believe.
  • What's more likely is that your work will contain at least one stronger colour*, as you'll want to have legible text and maybe some accent colours too. This will introduce the strong contrast commonly needed for accessibility and vivid experiences. It will also put your background in context with the text and accent colours. There's something like an uncanny valley when it comes to contrasting colours: choose very similar ones, and they seem like a slight variation of the same colour; with huge differences you have a clear cut contrast. Choose a colour relation in-between, and you'll likely get something that's neither a smooth variation nor a clean contrast, but a composition that feels undecided and muddy.

Now this might be something you're going for, if you aim for such dissonances as a stylistic tool to draw attention to your work. Since you asked this question on UX SE though, I believe you are interested in a "nice" user experience, without artistic dissonances. In that case I'd strongly recommend against using two very similar but slightly different hues of grey.

*I'll count Black and White as a colour here for the purposes of this question

|improve this answer
  • +1 for ‘dissonances’ – gerstemout Sep 7 '18 at 8:08

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