Are there rules for using warm and cool grey tones together in UIs?

Question

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

What I want to achieve with the new color concept is to increase reliability and trustworthiness by eliminating colors that somehow don't fit in. So I came across those different versions of grey.

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? 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? So far I haven't come across color schemes that include both warm and cool grey tones.

Answer 1

Rely on your instincts.

As the sample image above shows, they are wildly divergent in their feel and color. What it will all come down to is the type of feeling/app you are trying to make.

Warmer colors would remind me of a food app or a coffee shop, while cooler colors would be a banking app or another kind of corporate app. Both are separate feeling and vibes. I wouldn't use both nor have I really ever seen both used in combination to great effect.

I'd compare your app/site to existing examples to see how they handle greys. Generally, most sites lean towards the lighter spectrum and use greys in the cooler spectrum but again compare your app.

---

1. Look at similar apps and how they use it
2. Evaluate the feel/look for your app
3. Decide which to use, but don't use both.