To complete the Mastercard logo redesign, leading design studio Pentagram embraced the cleanest law of color: halation.

When you mix two parent colors exactly, and place the family with edges adjacent, a luminous phenomena occurs, this illusion of a gradient, that indicates harmonious related colors, is called halation.

“The design team here is so jazzed about this and felt like we’d created some unprecedented miracle of graphic design.” — Michel Bierut design lead at Pentagram

By blending the orange and yellow color circles equally to create the crescent middle child, the result is luminous. Sounds obvious?

Not so much.

The original Mastercard logo created in1968 blended color as if overlapping film, for those familiar with Photoshop of today, it would be like multiplying the two colors, always resulting in a darker child than the parents. This is an unnatural phenomena.

The crescent child color is not only darker than its two parent colors, it’s just unrealistic and muddy.

What was the inspiration for Michael Beirut and the Pentagram team?

With the basic elements of Mastercard’s logo non-negotiable, the challenge for Bierut and his team was to inject it with some stroke of ingenuity. For this they turned to a design theory mainstay, Michel Eugène Chevreul’s theory of simultaneous contrast as outlined in Joseph Albers’ Interaction of Color. source

“The way a color looks depends on what other colors are adjacent to it, what you learn is that you can create an illusion of gradation and dimensionality when in fact a shape is actually flat. We were so into that aspect of this mark: it’s three flat colors, but when you put them together the orange in the middle looks lighter when it’s touching the red and darker when it’s touching the yellow.”

— Michael Beirut

It’s at the edges that we see that glow, the apparent gradient that we call halation.

The essential composition hasn’t changed. Two Circles and three Colors. Yet the difference is that in 2016 the third color is a perfect blend of two parent colors. The middle crescent, the orange yellow blend is also in the middle of brightness. It’s lighter than its red neighbor and darker than the adjacent yellow.

“I felt like we’d created some unprecedented miracle of graphic design.”

Pentagram on Mastercard:

Pentagram's Michael Bierut Geeks Out Over the Color Theory Behind the New Mastercard Logo

Brands that know color. Add yours in the comments.

British Petroleum, more commonly known as BP, they know color.

Not only is paying attention to color useful — it’s an immediate reminder of how perception is limited and always biased.

Twenty-five colors are created and perfectly arranged within a frame. In this world of perfectly related colors, four corner colors become the primaries. The primary colors derive every other color. The relationship among each box of color is made distinct, the ordered solution is intuitively harmonious.

Colors in order

Twenty-five distinct fields of color are contained and placed right up against each other, made adjacent, resulting in a dramatic visual effect. Each box is a solid color, deliberately made the color blend in equal relationship to its immediate neighbor colors. The border edge is crisp and the rest of the box appears to actively blend, like how in every room of white walls the corners always look extra painted. It’s like a different kind of blend. It looks like a gradient. It’s as if the contrasted adjacent color has enchanted its neighbor.

What we actually see instead of solid blocks of equal color is an illusion of millions of colors smoothly enhancing the edge of visual contrast. Overly familiar with this optical effect we rarely note its oddity.

The game is to put the colors back in order, in a way you know looks right but you can’t really explain in words.

Huedoku🤙🏻🤙🏼🤙🏽🤙🏾🤙🏿🎨🌈 (@huedoku) | Twitter

We’ve all heard about ‘opening the doors of perception’ but what you likely don’t understand is how literal, at least in the realm of color perception, that concept is. We have 5 senses which determine our experience. The two essential things to know about visual perception are:

(1). Your eyes push contrast at edges to extremes beyond reality, and

(2). Brightness, or value, is processed in an entirely different part of our brain than color.

This post explains visual literacy, specifically color grammar, why that matters and how it applies to the rest of your experience of life.

TLDR; Visual literacy, like rules in math and grammar in language, is essential and objective. It’s essential because we are reading less and looking at visuals more. Color Grammar is objective because it’s based on science, it’s not artsy-fartsy “whatever you want it be”. The two keys to understanding and creating impactful visuals is learning to see the value of a hue and the degree to which vision pushes contrast (halation). These are the two keys to understanding the biology of vision and preparing yourself for a world requiring color grammar and visual literacy.

Make the sun vibrate like Monet? That‘s in step one. Create halation, so colors glow? Step two. But first you have to trust that I am speaking straight neuroscience and biology. I painted for years, intuitively grabbing colors off the shelf, and sometimes the combinations looked great, and other times, not so much. Now I get why, and you can as well. Mastery of color means you know the laws of color.

You see no sun when hue matches value

Recently I was asked for resources to “understand and feel color”, to not just “learn in a class or book, but dive in” to getting color.

Here was the question:
“Would you be open to suggesting some resources where I could dive in to color? Where I don’t just learn about it in some class or book, but can really start to understand it and feel it! I’m excited to start exploring this.”

My answer:
Where should we start?

To master anything, discern its essence to observable truths.

Can we reduce all of color mastery into two simple observations?

Let me offer two truths, two things, two essential elements, keys, methods, call them what you will, these are two testable things that explain how you see that you can prove or disprove for yourself right now.

To fully understand color perception know these:

(1). Halation

(2). The Value of Hue:

Step One

(1). Halation: *leveraged for harmony/glow: Enhanced contrast at the edge of adjacent colors creating an illusion of a halo spreading related color.

Our perception is hardwired to push the contrast at edges beyond what it actually is. The visual effect of halation is an illusion of a gradient within a solid color. Everything at the edges of contrast, like two sadjacent swatches is pushed to appear in greater contrast than it actually is. Our perception is hardwired to make things that are immediate, or touching, more extreme in their difference than they actually are. When this occurs among related colors, created in equal steps from the same two parents, as in an array of color, the halation is magnificent.

Step Two

(2). Value vs. Hue/Color:
*leveraged for vibration : Value (Same as “Brightness” and “Luminance”)

If you can trick the brain by matching the value of different hues, an object becomes invisible to the part of our brain that defines location.

The part of our brain that makes an object distinct, defines location of things and is, for example, responsible for catching a ball, is the part of our brain that sees value (brightness, AKA dark to light)… and is the same part of our brain that is active under moonlight. It’s in the cerebral cortex, one of the oldest parts of our brain in terms of evolution. Reptiles share this aspect of vision. AND it’s an entirely separate part of our wiring than how we see color.

Color and hue are experienced in the frontal lobes, evolved much later. This is no small matter, the insight of this distinction between value and hue has allowed artists to create the effect of vibration.

To clarify, the two essential truths to see are halation, where your eyes create an illusion of color spreading beyond where it actually exists and learning to see the value, or brightness, of a hue.

That’s it.

Most likely you are still attempting to understand what I am saying. It took me a few years being exposed to these concepts to really get it.

First, understand that we are talking about the truth of things:

(a). Objective truths, color grammar, visual literacy, the biology of how vision works — not some artsy-fartsy conceptual and subjective interpretation like “it’s whatever you want it to be”, not at all, AND

(b). Color is relative, always. We are talking about color in relationship, because appearance is always based on context. Always. You cannot escape the hard wiring of your perceptive system.

Accept that…

And/Or just perceive what’s obvious and in front of you.

This is not some artsy-fartsy conceptual and subjective interpretation like “it’s whatever you want it to be”

Now we have to get into definitions, the three dimensions of color:

Hue, Saturation (Chroma) and Value (Brightness,Luminance).

Saturation

Saturation is also called chroma. Think of it as the richness of a color. When you think of a kid’s room full of primary colored toys, those are fully saturated.

Saturation can clearly impact the value of a color, but to explain this critical point about color perception, we are going to stick to comparing hue and value (brightness) because this is a stunning and relatively unknown aspect of how we see.

So let’s get into the second and third dimension of color. Hue and Value.

Hue

“Hue” is where we are on the color wheel. Hue is often thought of as color but a hue is a hue regardless of value and saturation:

Value=Brightness

The term “value” is synonymous to “brightness” and “luminance”. Value is the intensity, lightness to darkness, in the most obvious case, value is most thought of as a range of white to black.

We can see value in color as well, for example pure yellow is lighter than black obviously, but it’s also lighter than pure blue:

What we are reaching towards, is this explanation of how our eyes and brain process and interpret hue vs. value in entirely different systems, and most importantly how understanding this is essential to knowing color grammar and visual literacy.

If we look at pure yellow vs. pure magenta, we can agree the magenta is darker than the yellow.

And if we flip the color array, and then lighten the magenta, making it more of a light pink, and darken the yellow, we now have a darker yellow than magenta.

We can do the same thing by lightening blue, below the blue is lighter than the dark yellow.

So why does this matter? Because hue is processed in our frontal lobes, it’s an entirely different part of our perceptive system than the part that sees value.

Take a circle, like Monet did the sun, and match its value to the value of the hue surrounding it, like Monet’s blue/purple sky and what happens is stunning: the object, the sun, disappears.

In luminance perception:
colors with the same brightness vibrate and/or disappear. Learn to see the value of hue — such that you can predict if it’s indistinct in a black and white photo — and you master your brain, as you master color.

There is nothing you can do to override the hard wiring of your perception.

Take halation, where you push edges of color fields beyond the existing contrast. Despite knowing the gradient is an illusion, you can’t help but see it.

Art is subjective in so many ways, of course, but there are elements of color in relationship that have predictable and determined outcomes. Color is rarely if ever what it appears to be. Vision, like the rest of our perceptive system is dynamic.

We are analog, not digital, creatures. There are laws of color and that’s a good thing because that means it can be learned. Math has rules, language has grammar, and so does color.

While I’m putting forth these two concepts to aid your understanding of color grammar and visual literacy, I can’t claim that these are the only two required truths, these are just the two tools that I believe work and are complete. Everything I share are concepts that are apparent to your eyes, that you can prove or disprove for yourself, based on your experience. I strongly advise you do your own research.

For example, a core experiential aspect of your perception is “after image”. Vision is analog not digital. The longer you look at an image, the deeper in burns in your retina. For more on this, check out the incredible insights provided by this post on Complementary Colors. Know that true color exists only in our minds as color is always dependent on context.

Local color exists only in our minds

Despite the dynamic essence of color, that it changes based on (1). surrounding colors (2). lighting of your environment (your monitor/screen or indoor/outdoor lighting) and (3). the dimension of time, or after image, these only further to strengthen the importance of the laws of color, the grammar of color and the impact of visual literacy.

As kids in school these days, it being 2018, are less and less learning cursive, less compelled to learn language grammar because language has less and less potency. It’s astonishing the degree that we are illiterate in visual literacy and color grammar. Understanding these two rules is more essential now than ever before. Hue has value, and halation reveals the biologically exaggerated contrast of our vision.

I’ve been pushing the importance of visual literacy and color grammar for some time now.

What does it mean to be a color master? Most of us dismiss color as subjective, if not happenstance. That is not the case. Designers and artists have monopolized color for too long. You can master color because there are organic truths that make it teachable. It’s in front of your eyes right now. These observations are based on science— the hard-wiring of our biology. Most importantly, it relies on your own personal, diligent, pursuit of the truth of things.

Further reading and resources:

Color Master Dick Nelson who advanced the Joseph Albers’ color course
Abstract Art Explained
Huedoku Brain Zone

https://twitter.com/gabecolors

The Color Movie:

“I am always hoping to make a discovery here, to express the feelings of two lovers by a marriage of two complementary colors, their minglings and their oppositions, the mysterious vibrations of kindred tones.” — Vincent Van Gogh

1. Complementary colors are opposite each other on the color wheel.

This is the basic fact about complementary colors: complements are opposite eachother on the color wheel.

Now, which color wheel you use, that is another story we’ll get into a little later, however, this is essential color stuff, basic fact, must know: to confirm that two colors are complementary, note that they are diametrically opposed on the color wheel.

2. Complementary colors when blended, mix to grey, and when standing next to each other create a vibration.

“They incite each other to maximum vividness when adjacent; and they annihilate each other to gray black when mixed- like fire and water.” — Johannes Itten on complementary colors

As a designer, painter or visual jedi- be on the lookout for complementary colors. If you see them next to each other, note the tension between them.

If you want a Green to stand out, put it on a Magenta background. It might even hurt the eyes. Complementary colors when snugged up against eachother mark a strong contrast. Yet when blended, they create grey.

3. The after image of a color is the complement (and the primary colors ain’t so primary)

The longer you rest your eyes upon a color, the deeper you are fatiguing your eyes. The eye is seeking neutral. So, after staring at a single color and then looking away, at a white wall per se, you will see a glowing color that is the complement of the color you were staring at. The eye is compensating by activating the opposing color. When you look away, it takes some time for the eyes to re-achieve the neutral balance it seeks, thus: after-image.

Stare at the wheel of color below. Rest your eyes on the center for a good 10 seconds if not 20. And then look at a blank wall or white part of your computer screen. What color is the after image?

Most of us have seen different examples of this- I remember in high school staring at a strange version of the American Flag and then finding the good old, correctly colored, Red White and Blue flag appearing on a white wall. I prefer to use the preceding example because it makes a second point- that the primaries of light (additive colors) are the complements of the primaries of ink and paint (subtractive colors).

The after image of Cyan, Magenta and Yellow reveals this combination of Red, Green and Blue that make up the primary colors of light.

The after image is a very distinct Red, Green and Blue. These are the exact complements of Cyan, Magenta and Yellow. “Experience always precedes theory” is a motto espoused by the Josef Albers school of color and the most direct way to know a complementary color is to use after-image. Before you believe some folks who would tell you that Red is the complement of Green, check the afterimage. The afterimage does not lie.

And, it does more to prove the case that the color wheel you learned in kindergarten is all wrong. Red is not a primary- Magenta is. Cobalt Blue, the blue you are used to as a primary, is not a primary. Instead, Cyan is. We know that Red and Blue are two of the primaries of light, thus how could they also be the primaries of paint?

this first appeared on colorisrelative.com

The Three Things You Must Know About Complementary Colors was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

I used to be one of those people who, when visiting a museum, might exclaim, in the presence of a Jackson Pollock all-over painting, or a Josef Albers’ Homage to the Square: “a kid could do that!”

“A kid could do that”

In a modern art critique class at the University of California at Berkeley, we studied three artists over the course of a semester.

1. Malevich painted a white square on a white canvas.
2. Mondrian painted primary colors.

A Worthy Understanding of Color and Composition Through the Lens of Malevich, Mondrian, Pollack and Finally Bauhaus’s Josef Albers and his Legacy Carried on by Dick Nelson

3. And Jackson Pollock, he painted all-over.

In spite of my deepest efforts to understand,I got a “C” on my first paper. What made this art great?

Was this all bullshit?

The Teacher’s Assistant, finally, exasperated, said to me directly:

“Stop, just stop, stop thinking, stop writing and just look.”

I remember feeling exposed as the Teacher Assistant applied discipline to my curiosity.

As a class, we visited the Berkeley’s Art Museum. Lucky to have a single Jackson Pollock in their collection, while referencing me (as I must have seemed striving to understand abstract art) she instructed:

“Tell me where one stroke of color from his brush ends and another begins.”

Spend enough time in study of, well, nearly anything, but in particular, Abstract Art, and you will inevitably deepen your appreciation and be struck by a sort of perceptual awakening.

It happened to me, on a bench, at the New York MoMA, I stirred inside, absorbing the original “Autumn Rhythm”.

I sat in awe, alone, on the bench, surrounded by paint strokes and color.

“Tell me where one stroke of color from his brush ends and another begins.”

Despite what truly felt like a mystical experience, what I deeply wanted was reason. Why? Why was this art great?

I graduated, I traveled, I rode a business wave and then jumped, unabashedly into painting with great success: multiple gallery showings, 1 million visits to my website, and a patent filed on optical encryption.

I created my own abstract expressionist paintings, and while my admiration for the masters increased, I could not explain a methodology or reason for the mastery.

I still wanted to know why. What made this art effective? What made my own paintings work?

And then I met the Professor.

“finally getting it”

Dick Nelson, Hawaii’s own color master had been making color arrays in Adobe Illustrator. He had already evolved Josef Albers’ color course into the digital age, but it occurred to him, what if color arrays were rendered in two dimensions, as a matrix.

A decade after falling in love with Jackson Pollock’s art, years after beginning my mentorship with Dick Nelson, I found myself in Amsterdam, at the Van Gogh Museum, staring at a painting that was part of a visiting exhibition.

The painting was famous, well lit, surrounded by people, while a docent spoke eloquently about its source’s mastery, but all of that was background noise to me.

That sun, that sun was so brilliant, it seemed to dance in my eyes.

I’d been immersed in studying color relationship; how to create luminosity in a painting using halation and vanishing boundaries. But I had never seen something this vivid. I felt like a cliche, looking behind the wall for the wizard who was lighting this artwork from behind.

On my way home to Hawaii, a stopover in New York, and a meandering visit to art galleries in the Chelsea district, I happened upon a book called “Vision and Art, The Biology of Seeing”.

Vision and Art: The Biology of Seeing

The first page I opened showed a picture of the exact painting I’d seen with the vibrant sun, along with a scientific explanation for the occurrence of luminosity.

One hundred and fifty years after the Impressionists, neuroscience was explaining the magic.

Color is science and art, it is emotion and math.

It is a vivid, metaphorical dance between wave and particle.

Color behaves in ways Newton could delineate (it’s real, material, physical, in the world) and Goethe could abstract (our mind’s interpretation is vast). Nevertheless, most people are missing something beautiful that is right in front of their eyes.

Can you really see? Are you really looking?

Monet had made the orange sun match the luminosity of the purple sky.

If we could lead people to see how Monet created luminosity with color, perhaps they would appreciate, they might stop and actually see for themselves.

I returned home committed to the notion that we could share this insight with the world.

Abstract art was not childish nor just intuitive, color perception — whether aesthetically harmonious or clashing — is based on a set of laws.

Color relationship is nothing new, at least in the last 150 years, but it is not understood.

Color grammar is wildly misunderstood

I created The Colorbox, an interactive art installation, that traveled around the Hawaiian islands, inviting people to step inside to experience color relationship with their bodies. I made a website that has received 1 million visits.

Returning to his studio in Maui, overlooking the sweeping valley so flat it could disappear beneath the ocean, he applied every lesson in Albers’ course, using only the color matrix as allowable colors, and found every lesson was possible. This was the Rosetta Stone of color theory.

I asked, “What if we scrambled the matrix?”

The result is Huedoku, which makes the Rosetta Stone of color theory into an interactive experience.

In May of 2016 and I returned to The Netherlands. In tow, along with Dick Nelson’s genius, the guidance of Bevil Conway, a world leading color neuroscientist, on our advisory board, we present our greatest effort yet to share not just the magic of seeing color in it’s full luminosity, but also the understanding of how.

Find us on Twitter @huedoku and join the Huedoku conversation on facebook. Download Huedoku for iOS, the original color puzzle. Become a beta tester and create your own Huedoku Puzzles from colors in your photos, optical encryption, with Huedoku Pix beta.

Bringing it back to the first order, honoring Monet and his insight to match the hue of his sun with the value of his sky surrounding, here’s what happens if we make a black and white version of the first image you saw in this post:

Let me know what you think: @gabecolors @huedoku

Social Games Blending Color Therapy and Cognitive Enhancement.

Coloring Outside The Lines

Who doesn’t love a coloring book? As a child, you had a box of Crayola crayons and made shapes on blank paper or filled in shapes defined by lines from a coloring book, bringing color to life.

While I don’t mean to discourage your coloring exploration, I do need to inform you that coloring “inside the lines” especially when those lines are black, like in a color book, you are missing out entirlely on the visual impact of color in relationship.

Recently, adults have been returning to coloring as a therapeutic practice. CNN reported at the beginning of 2016:

Everyone from researchers at Johns Hopkins University to the editors of Yoga Journal suggesting coloring as an alternative to meditation — Why adult coloring books are good for you

Visit a local book store in your town if you are lucky enough to have one and you’ll find a section dedicated to coloring books.

Reports of color pencil manufacturers running out of stock and adult coloring book sales increasing anywhere from 923 percent to 36,600 percent depending on how you run the numbers in There’s A Global Colored Pencil Shortage And It’s The Adult Coloring Book’s Fault.

Why are adults playing with color? What is the benefit?

Coloring books for adults are extremely therapeutic and can help generate wellness, quietness, mindfulness and the exact same benefits which meditation imparts on the brain.[1]

I was riding the bus from Chinatown to Waikiki with my iPhone in hand, usually an isolating experience, when the elderly woman next to me asked what I was doing.

“Playing Huedoku”, I said to her as I explained how it was like Sudoku but for color.

So what about just playing with color, sorting colors into harmonic order as we do in the App Huedoku?

There are no lines in Huedoku

While it has become somewhat of a cliche to describe a creative and bold attitude as drawing outside the lines, I want to discuss something quite different when you remove the lines.

Take a look at the two matrices of color below. Both are a set of the same colors, both are made by blending the four corner colors equally with each other. Yet the one on the left shows colors directly touching, while the one on the right separates each color with a thin black outline.

Coloring outside the lines.

Originally published at huedoku.com on April 14, 2016.