Amazing Colour Effect using Trichromacy

Posted on May 1st, by Andrew Kelsall in Color Theory. 21 comments

Share on Facebook0Share on Google+3Tweet about this on TwitterShare on LinkedIn12Share on StumbleUpon39Pin on Pinterest6

simultaneous contrast

Displayed above is an amazing trichromacy colour effect that all designers should see. If you take a look at the X’s, they both look as though they are different colours. However, they’re not. The colours are exactly the same tone:

Look at where both the X’s intersect at the middle-base of the image. You can see there that the ‘true colour’ is in fact a greyish-yellow tone (a mixture of the two colours used in the rectangles). This effect is based on a painting by Josef Albers.

To see something a little weirder, take a look at the second image I have devised, taking the effect one step further:


As can be seen, the horizontal bar appears to show a gradient, starting with yellow on the left, to grey on the right. However, as with the first image, the colour is a solid tone—not a gradient of two colours at all. If you don’t believe me, drag the images into PhotoShop® and whip out the colour-picker tool!

Why is this happening?

This effect is know as trichromacy, with the images above demonstrating simultaneous contrast. To cut a long story short, out eyes record colour in RGB—but none of us can image a yellowish-blue. Our brains therefore plays tricks on us, resulting in the effect/illusion.

I think knowing this kind of information about colour can be extremely beneficial to a designer. Colour theory is embedded in all we do, so it’s great to understand great effects like this to aid in design work. Knowing what colours will or will not work together can be imperative—especially in logo design.

I have written an article about metamerism with another colour-illusion there if this subject interests you. Do you know of any other great effect like this? Do you think knowledge of colour theory will aid in your design work?

If you liked this post, check out A Print Handbook for Designers.

Share on Facebook0Share on Google+3Tweet about this on TwitterShare on LinkedIn12Share on StumbleUpon39Pin on Pinterest6

Why not take a look at one of these Articles...

21 responses to “Amazing Colour Effect using Trichromacy”

  1. That is pretty amazing and definitely worth knowing…. now to find an excuse to use it!

  2. I’ve got another color contrast effect for next week, too.Thanks for commenting Matt.

  3. says:

    Amazing color effect that all designer’s should see……

    Displayed in this article is an amazing color effect that all designer’s should see. If you take a look at the X’s, they both look as though they are different colors. However, they’re not. The colors are exactly the same tone……

  4. swapnet says:

    thanks. this was a wonderful discovery. i am glad now i know this!

  5. Pamela says:

    Hi Andrew,
    Thanks for this topic…you brought me back to college. In color theory class, we used “coloraid” (link below) paper to show this very effect and others.

    Another one is to use colors and shapes, side by side and on top of each other to show depth perception and movement. This was one of my favorite classes.

    I enjoyed my first visit to your blog and definitely will be returning.


  6. CAMS says:

    heh cool. learn something new everyday 🙂

    CAMSs last blog post..Redesign Soon

  7. Rob Cubbon says:

    Hi Andrew. Great. I thought I knew all these optical illusions already. I obviously don’t. Can’t wait for an excuse to use this!

  8. @ CAMS

    Thanks for commenting…


    No worries 🙂


    Glad you liked it. It was interesting to learn from your link, that Color-aid was discovered by Josef Albers. Thanks for commenting.


    I’ve been thinking of where I could put this to use, too. Great minds think alike 😉

  9. Pamela says:

    Andrew & Rob,

    If you think about…you put it to use every time you design. Color theory is part of all that is creative. It’s always in the back of a designer’s mind when choosing colors…sort of subliminal if the designer really knows the theory behind color and what it can do.

    Colors are not static unless used by themselves, but when they are paired it’s sort of like a chemical reaction. As Andrew illustrated above.


  10. brian says:

    Amazing how the brain works, huh?

    I’ve noticed that people don’t consider how they use color in a lot of design pieces lately. They should. It can have a huge impact on people.

    brians last blog post..10 Terrific and Handy CSS Resources

  11. @Pamela

    I totally agree. On the majority of occasions, a color can only be judged on suitability, for example, when placed side by side with either one color or range.


    Yeah, we’re not designing for dogs 😉 I find color theory a really useful and interesting area to research into. Nobody knows it all, that’s why I love to learn the areas I don’t know and pass it on anyone who’s interested.

    Any designer who doesn’t have at least a basic understanding on color theory isn’t doing themselves justice in the profession at all. Like you said—they should.

    Thanks for your input.

  12. kindergarden says:

    This is totally natural.. nothing amazing about this!

  13. @ “kindergarden”

    That’s quite negative. I know too well of the inner working of the eye and how we perceive color. Of coarse it’s natural, but to designers who love color theory, many would consider it quite amazing—and it’s good to discuss such things.

    The milk in my coffee is natural, but the process of how cows make it still amazes me.

  14. Brad says:

    Thanks. Seen this stuff before, pretty interesting.

    Brads last blog post..Everyone’s tweeting but no one’s listening

  15. @Brad

    I’ll eventually get the other color illusion sorted out at some point. Thanks for commenting…

  16. […] this month, I wrote an article about simultaneous contrast entitled Amazing color effect that all designers should see. This new “illusion” is based on the principle of successive contrast, whereby the […]

  17. pearible says:

    Hmm… it’s either my eyes, or my monitor… because the X’s both look the same, and I don’t see any gradient on the bar.

    no funky visual effect for me 🙁

  18. Hi @Andrew Kelsall this color effect looks great, thanks for the idea.

  19. @pearible → This illusion works best in print. Also, not all people see color the same. Everyone else appears to see the illusion working well. Maybe your monitor isn’t displaying colors accurately?

    @Mahallo Media → Hi! Thanks for commenting and visiting my blog 🙂

  20. […] I found a copy of their illustration here. (It’s the one with two X’s, rather than the one with a single bar.) […]

  21. WOW thats great!

    Now this is something every designer should at least implement once in their designs 😉

Here's a Selection of my Blog Posts:

These are some of the most popular articles here on Andrew Kelsall Design. Take a look...