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?
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 a 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?
- Adjusting the design to a harmonious color combination
- 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 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.
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:
If you have some flexibility on the secondary colours, it might help to try to "lighten" them up a bit. Something like this:
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.