You may recognize the smoosh in the video below. This is the source and inspiration for all the content at colorisrelative.com. Dick Nelson who created this video and more at his vimeo channel studied with Josef Albers in the 1950’s. We are fortunate now that he is posting educational videos that illuminate our color sense.
The grammar of color is crucial! As crucial as grammar in lanuage. How can you understand the visual language if you don’t have the grammar.
This is Dick Nelson’s second video release from his DVD, “The Dimension of Color” covering in 3D: Tinting, Toning, Shading… Full Chroma… Complementary colors… Primary pigments, Secondary pigments and more.
In this video, Richard “Dick” Nelson takes the time to explain one of the most commonly misunderstood art series of all time: Josef Albers “Homage to the Square”.
This is mostly for Adobe Illustrator users but it should be interesting to everyone.
Something is wrong with this color wheel. The tertiary colors were created using the Adobe Illustrator blend tool. Fix Illustrator’s calculations. The challenge is to create the perfect color wheel using these 12 slices.
DUE: February 5th, 2011
FILE FORMAT: Adobe Illustrator
1. Download the original color wheel Adobe Illustrator file.
2. Using the color wheel with 12 pie slices, correct the tertiary colors where needed (the colors between Yellow, Red, Magenta, Blue, Cyan, Green and Yellow).
3. Make note of your corrections by changing the numbers for rgb.
4. Attach your file to firstname.lastname@example.org with any commentary in the body of the message.
The RGB and CMY spots are pure- you can debate these elements as you wish, but within the program each is maximized while it’s complement is zeroed out. The primary colors are pure and correct. Cyan, Magenta, and Yellow are fixed as the primary colors. Red, Green and Blue are fixed as the secondary colors. This is all dandy until we get to the tertiary colors.
Based on the calculations by illustrator, using the blend tool, the colors just don’t look right.
There’s something about the way Illustrator calculates the colors between Yellow and Green especially that just looks wrong.
The tertiaries, the colors between Red and Magenta and Green and Cyan favor one of the parents. Mostly, Yellow and Green
Find halations of equal balance. Where you see each edge of the tertiary color slice glow with the opposite parent in an equal balance, you have the proper blend.
With 32 Poles, I was going for a much more subtle effect than in the 3 other pole pages. By using a blue and orange that are complements and are closer in value and as well using a greater number of poles, the steps are more subtle and the effect is more powerful. Almost the entire row of 31 poles will appear orange when the last pole is selected and matches the background. And vis versa, when the far left pole is selected, the rest of the poles look blue.
In addition, the grid on the far left allows you to see the poles against a stronger blue and stronger orange than the extreme left and right poles. It also allows you to clear your eye fatigue by opting for a clear white, black or neutral gray background.
For all of you saying “What’s the Point?” this release is dedicated to you. The point is, you are not seeing what you think you are seeing. Your eyes are constantly adjusting to the context around them.
In the image at left, the two swatches are the exact same color. Now that I have told you that, you can see that. You probably even predicted there was some trick to this and guessed that the two swatches were the same shade of gray.
Let go of your pretense. When you let your eyes see on their own, the two swatches look different even though they are the exact same shade of gray.
They look different because of the color around them. We accommodate with our eyes. If we see a dark background, we make the lighter spot brighter, appearing lighter than it actually is. And just the same, on a light backround, the same gray appears darker than it actually is.
These exercises are not answers, these are tools to help you train your eyes. As you move your mouse along the array on the left of ten shades of gray, the background matches the swatch you choose. As well, the whole in the middle of the upright rectangles also matches the swatch you chose and thus the background.
Our perception of color is adjusting constantly.
How are the two images at left with the blue backgrounds similar or different? In both, the background matches the color of one of the 16 poles. They are both screenshots from Yellow to Blue Poles. When you click on a bar from the color array, the background of the web page will match the color of the bar you chose.
If that’s confusing, just look at them closely. Once you see the difference between the two images, you’ve just worked your color muscles and you are about to see more.
The blue color is a mix of Cyan and Magenta. The blue and yellow that I chose are complementary colors.
My roommate Tessa asked me tonight, “Where is the green if it’s mixing blue and yellow?”
If we had been mixing Cyan and Yellow, we would have gotten Green. As it is, we are toning. As we move from parents who are complements, the children gray.
When you mouseover a yellow pole, the background turns yellow and all the poles which had seemed yellow before, now appear as if they are blue. The context of the page entirely affects our perception of the color of each pole.
create arrays in Adobe Illustrator When I made the ten poles and checked to see how the colors would appear on the web (primed for 256 colors) , the hexadecimal code was all mumbo jumbo.
I wanted clean language. I wanted a progression of color steps that matched on the web as I was seeing in Adobe Illustrator.
I made 16 poles, so that it matched the number of poles within the scheme of the binary color scheme. The progression is hexadecimal codes.
It’s beautiful how it counts down on the left four digits and counts up on the right two digits: #FFFF00, #EEEE11, #DDDD22, #CCCC33, #BBBB44, #AAAA55, #999966, #888877, #777788, #666699, #5555AA, #4444BB, #3333CC, #2222DD, #1111EE, #0000FF
If you click on one of the blue poles on the far right– say the third from the right, yellow suddenly seems to extend all the way across. And the same is true on the opposite side. If you choose the bar just two or three steps in from the left, from true blue, all of the bars to the left will appear yellow. And those to the right will appear blue.
[Update in italics: October 2, 2010]
The composition has recently changed. When I was adding the navigation menu I realized that this piece (Plum, AKA Happy Birthday Dad), had never been centered vertically. Same for Poles, the most popular piece. I just centered them both. At first, I accidentally put the collection of center four squares where it is now, resting on top of, or above the 4 x 4 matrix. Perhaps I’ve just seen this so many times and am refreshed to see something new. It brought me back to the multitude of ways there are to experience these simple color field artworks.
You can pick a swatch and know confidently, there is no pixelation or gradient of any kind happening with the image. The squares are made with simple HTML tags that color the background of a table cell; meaning this isn’t a jpg or other file compression that would make the colors spread on their own.
Let your eyes rest on a single block and begin to notice if it appears as a solid or as if it as gradient. As you move the mouse around and change the background, try to get a sense as to whether or not the color of the background helps to determine the consistency of the individual squares. Sometimes a square will appear as if it is transparent: you can see right through it to the background color of the entire screen. When this happens, the matrix on top seems as if it clearly standing in front of and away from the background.
The rows and columns start to take on a three dimensional feel. The columns look like they are smooth and consistent enough that they could be grooves in the columns of the Parthenon.
Moving the smaller set of 4 squares up so that it created a new relationship to the matrix of 16 was interesting enough for me to leave as it is now. That’s why it is different than the image at left above.
And you know which color those four squares are right? They are the same four squares as are in the middle of the matrix there.
I was thinking my dad would like this set of colors, no idea why, but it’s his birthday. Hey, Happy Birthday Dad.
When you move your mouse over the individual swatches, the background of the webpage changes to that color. As you move the mouse around to each swatch, you can see halations in the swatches.
The colors seem to change in the matrix as the background changes. The lower set of four boxes, is the same swatch set as the middle of the matrix above.
I had been curious how the middle boxes within the matrixes would respond without their parents surrounding them and keeping them separate from the background. Mostly, they serve as matching swatches to watch how different they look than the same swatches above as the background changes.
The Plum page is dedicated to my dad. He was born in 1939. Happy Birthday and may all your dreams come true!