4

My client has a fixed branding color schema, so I can't change its colors. He asked me to design an accordion component, where the header part is going to be blue color and in the header, I should put a piece of color information about the product it holds. The colors don't match with each other, the header has blue and the product has red, green, yellow colors. I've tried different iteration, but honestly, they suck. No matter how I combine them (borders, shadow) they hurt my eyes. Any idea how can I "neutralize" those colors?

enter image description here

  • Is your client a ux designer? – Nicolas Hung Sep 13 at 9:52
  • Nope. Not at all. – Gabriel Sep 13 at 13:39
  • 4
    Why is the client deciding on color, interface and functionaly? – Nicolas Hung Sep 13 at 13:41
  • 6% of the population (with colorblindness) won't be able to use the product color indicators well. Can you push back and ask for a different way to represent products here? – Izquierdo Sep 13 at 22:22
  • Are the red/green/yellow colours fixed, or can you pick them yourself? If they are fixed can you at least change the brightness/saturation of them? – musefan Sep 14 at 10:44
7

Before answering the question, there are a few things to consider.

If those are the corporate colors, there must be some reason why your client chose them, including personal taste for colors or the target audience for the final product. If this is the case, I'm sure that your client would not disagree with the extreme use of these colors.

  • My first answer to your question: don't be afraid of colors

Your statement about the possible combination that says - ... honestly, they suck - refers to your personal taste, but may not correspond to the intention of your client regarding the product and its audience.

  • My second answer: avoid if it's possible to impose our personal taste on the preferences of a client

There's a very popular German supermarket chain with some very garish corporate colors, Lidl. If you visit the web you will see they don't limit the use of their main colors: blue, yellow and red. I try to imagine the web designer saying to the marketing director: - I made a design neutralizing the corporate colors -... This is practically the same as saying I have thrown all the corporate precepts of the company to the ground.

  • Third answer: see graphic guidelines as a starting point, never as impediments

Hence, how can you act with the corporate colors of a company?

  1. Adjusting the design to a harmonious color combination

or

  1. Extremely exaggerate the use of these colors in each design element

But I think the phrase "neutralize corporate colors" in a design is not the right thing to do.


Now the answer to your question.

In all your examples you use blue shapes contacting red shapes. Cyan (blue in your case) is a complementary color to red, the combination of these two colors never goes unnoticed, on the contrary, it makes both colors vibrate. The opposite of neutralizing is juxtaposing shapes with complementary colors:

  • Cyan ⟺ Red
  • Yellow ⟺ Blue
  • Magenta ⟺ Green

In color theory, the color that has the power to neutralize colors is gray: the color gray turns off the rest of the colors, it takes away their strength.

There are web pages with many colors that use gray as the dominant and the other colors as details.

In the example below you will see the dominant color is still the blue. Red, yellow and green are secondary colors, turned off by the surrounding gray. It's not a final design, just an example of use. Following the guidelines of your design, if you avoid the contact between colors and use gray to neutralize, you will surely get a good result.

enter image description here

| improve this answer | |
4

Ultimately you are being forced to use what is quite a bold colour. However, try to use that to your advantage and aim to create a consistently bold design throughout.

I think the key thing here is to try and add some separation between the conflicted colours using a neutral colour, similar to what you have tried to do in your second example. Just make it bigger and bolder!

Perhaps something like this:

enter image description here

If you have some flexibility on the secondary colours, it might help to try to "lighten" them up a bit. Something like this:

enter image description here


Also, as a side note, using a small circle of colour can be misleading. In your examples, a user might assume they represent some sort of "status" indicator. Especially if you are using traffic light colours.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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