7

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?

  • 1
    There is no Whiter than White. but you can add some little colors o give the feeling of more white "psychological" you can add 3% to 5% Cyan. or you can represent it in a high contrast composition (White - Black) – hsawires Aug 27 '15 at 10:21
  • I wanted to say yes at first. Because there are tons of books about that. But then if you are asking for such thing for screen then the answer is no. For example some smartphones have programed in them adjusting colors, so with lowered brightness (of the screen by user) white is still perceived as white. – SZCZERZO KŁY Apr 10 '17 at 7:29
  • Point of Information: Shades are created by mixing with black. Tints are created by mixing with white. Tones are created by mixing with grey. – Stan Aug 13 '17 at 14:32
  • @SZCZERZOKŁY Say yes. Your first instinct was correct. The perception is independent of the kind of display — hard or soft copy. – Stan Aug 13 '17 at 20:32
6

I love this question. Although it sounded wierd at first.

Gradients

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.

enter image description here

Here is the diference. I just added a little yellow on a patch in the midle of the gradient.

enter image description here

The same is true to the darker gradients. Specially with the yellow

enter image description here

enter image description here

The ammount of "correction" depends on the project.

  • 3
    Hey there @Rafael, while your answer is educational and can help the OP master gradient effects, how does this answer his question? He didn't mention anything about "gradients", he only said mixing colors which can reffer to having a green container with a pink image on a white body color... – Alin Aug 27 '15 at 18:37
  • Hi Alin. Quote: "This happens to a much greater degree when using shades of white" I am considerng "diferent shades of white" like a gradient. But this also applies to swaches. If you want something to apear as "light red" you can add some yellow. – Rafael Aug 27 '15 at 21:02
  • 2
    Sure, I agree but the question is how to make white look...more white? What colors don't visually substract the 'whiteness' of white to make it appear, well, less white, even if the color is set to #FFF...I was personally interested in this topic too, that's why I'm asking. Have a good night. – Alin Aug 27 '15 at 21:38
3

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.

chromatic illusion

Source and other illusion to see:

http://www.psy.ritsumei.ac.jp/~akitaoka/color12e.html


Another example:

example optical illusion with colors

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

delicious chicken chromatic illusion

Source:

http://puzzlewocky.com/optical-illusions/color-illusions/chicken-coop-illusion/

3

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

  • Say I have a shade of white : rgb(254, 254, 250). If I want to make it look more pure "white" (i.e rgb(255,255,255)), I should ideally want to impose a greater blue ('b') shade on shade of white, so it becomes closer to pure white. Thus I should be mixing my shade of white with yellow. Am I correct? – blurgoon Sep 4 '15 at 10:29
0

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.

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.