Visual Language: Color

Let’s start with a test:

color hue test

The task is to arrange the colors from one end to the other in order to create a seamless gradient. The lower the score, the better. How’d you do? Here’s my score:

color test score


I did pretty well! I found that if I stopped looking at the individual colors and looked at the whole range, It was much more apparent which colors were in the wrong order.

The next part of our assignment was to create a sketch to explore 3 different aspects of color: hue, brightness and saturation. I created a pixel mirror that would use only 1 of the three from the original pixels and set the other 2 values to a constant number. Here’s the original, reflecting the correct hue, brightness and saturation:


Here’s what happens when you keep the brightness and contrast constant and only reflect the hue of each pixel:


Here’s brightness:


and Saturation:


The sketch I made will cycle through these when the user clicks the mouse, and the value for the other 2 variables is set by the mouse’s y position. Here’s a video:

and here’s the code:






Leave a Reply

Your email address will not be published. Required fields are marked *