Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It only takes a minute to sign up.
Sign up to join this community
In designing websites and applications, I have noticed that when mixing colors with white, certain colors make white look more "greenish" or "purple-ish". This happens to a much greater degree when using tints of white.
As a designer, how can we understand how white is influenced by the colours it is contrasted with?
I love this question. Although it sounded wierd at first.
This first part I learned it prior to the digital age, mixing actual paint.
If you make a gradient straight from your base color to white you can sometimes have an undesirebled hue. For example Red to white pass trhu a pink color. (Orange arrows)
You need to slightly turn the color to a lighter part of the color wheel. (Green arrows) to compensate.
Here is the diference. I just added a little yellow on a patch in the midle of the gradient.
The same is true to the darker gradients. Specially with the yellow
The ammount of "correction" depends on the project.
What you're explaining happens to all color actually but might be more obvious on whites.
The main color, especially if used in many different tones or shades will create that illusion that the rest of the layout also has a tint. Sometimes that chromatic illusion has some benefits, for example in home decoration and painting.
You cannot control the reflection of the dominant color on the other colors but you can at least control that chromatic illusion. I think that reflection might be even worse on mobiles.
The only way you could balance this out is by having more neutral colors as dominant ones or by using colors that "cancel" each others. Not an easy task but that's how a lot of designers cheat to get rid of that illusion.
If you still want to cancel that pinkish white created by a red layout app for example, you might need to use a white that has a bit of blue or yellow in it; at least you'll get to choose how you want the white to be. Because red is often considered as a very masculine color, you (or your clients) might not appreciate that pink white indeed but they'll probably find it better if it's a very light gray-blue or yellow, and in fact it will still look white.
You can use these whites only when they're surrounded by heavy area of the dominant color, and use a normal white on other areas where the surrounding is more neutral. The difference will be barely visible.
Source and other illusion to see:
http://www.psy.ritsumei.ac.jp/~akitaoka/color12e.html
Another example:
Source, worth having a look, lot of chromatic illusions:
http://www.slideshare.net/viorea4u/aiykioshi-kitaoka-optical-illusions
Another one: Only 2 colors of chickens
Source:
http://puzzlewocky.com/optical-illusions/color-illusions/chicken-coop-illusion/
It has to do with complementary colors. The white color will acquire a shade opposite to the adjacent color. Ex: Yellow and blue are complementaries, so yellow will impose a blue shade on the adjacent color.
The effect will be more pronounced when the colors adjacent to each other are complementaries. That's why you see an even greater color shift when the white has a shade.
To compensate the effect you can try to add an analogous color to the white.
Here is some reference: http://www.webexhibits.org/colorart/contrast.html
As a designer, how can we understand how white is influenced by the colours it is contrasted with?
go-junta provided beautiful examples. I will try to explain what it is and how to find out more about the overall effect.
This phenomenon of perception is referred to as the "Adjacency Effect." Search on the term for exploring the "Effect of the Surround."
Another instance is the Cornsweet Illusion where the effect is used to increase the perceived contrast between two tones. Cornsweet Illusion
PhotoShop takes advantage of this with the "Unsharp Masking" filter to "sharpen" edges. This doesn't actually sharpen edges so much as treat the edges so as to "appear" sharper with heightened local contrast.
Generic rule: To increase an effect, place it so as to create the maximum contrast. To make white "whiter," place it adjacent to darker shades and tones.
