Learn More About Color By Working In Grayscale

Posted: 22 Dec 2014 05:30 AM PST

Do you find color difficult to work with? Do you have trouble combining colors in a color scheme? Would you believe me if I told you one way to learn to work with color is to remove the color information?

title

For the last few weeks we’ve been looking at the luminance component of color. First I talked about what luminance is and why it’s so important. Then I showed how to calculate a luminance value from RGB as well as the contrast ratio between colors. The combination can then be compared to accessibility guidelines.

Today I want to talk about a few things that didn’t quite fit into either of those posts. I want to consider the contribution of luminance to depth and then talk about working without chrominance information.

Spatial Acuity, Light, and Depth

At the start of the series I talked about cones and rods and how our rods, which are sensitive to light, don’t have a good sense of spatial acuity.

However, using light alone we can create a sense of depth on an otherwise flat plane. Adding enough contrast in luminance or the play of light over the object will create a sense of the 3-dimensional in a composition.

True we’re in the midst of a flat design trend, but depth will come back. It already is and it never really left. It won’t be to the same extent that it was with us in skeuomorphic realism. It will come back, but more subtle than before.

On the other hand when contrasting colors are created with similar luminosity the reverse occurs. If the luminance values between colors are too close they’ll flatten when compared to each other. Add enough contrast and the objects will begin to separate in space. It helps some elements come forward and gain notice while others recede into the background.

If you’re thinking about the relationship between figure and ground, give yourself a gold start or a pat on the back. It’s important that we separate figure and ground in any composition. Contrast in light and dark is one way we can.

Usually the lighter color will be seen as background, but it doesn’t have to be. The important part is that both are seen occupying different locations along the z-axis.

The contrast between light and dark can also add a great deal of drama to a composition. We’ll get to this momentarily.

Equiluminance

When objects of different color, contain the equal amounts of luminance (equiluminance), our eyes have difficulty perceiving the edges of the objects. Low levels of contrast flatten elements. Equal levels can cause other problems.

Due to the difficulty determining the position of equiluminant objects in space, the objects may appear to shift positions taking turns being closer and further away.

Because of this shifting in space, equiluminant colors can lead to a sense of motion and make a composition appear unstable.

Aspects of Color—Light and Dark

As I mentioned earlier in the series there are several aspects of color we can contrast with light and dark being one.

In western cultures, lighter tends to be seen as good and is typically associated with positive feelings. Darker tends to be associated with negative feelings, though they also add drama, mood, and tension to a composition. Darker colors can also substitute for neutrals at times.

Typically when contrasting light and dark you want to choose one as dominant and use the contrast of the other for accents.

Remember that light is seen in the context of an environment so think about when and where visitors will be looking at your site. There’s a reason people often prefer lighter color schemes during the day and in the presence of a lot of light and prefer darker color schemes and night when light is low.

Black and White Photography

Have you ever wondered why black and white photography is so popular? I know I have. I thought maybe it was some kind of retro thing, but after working on this series, I realize there’s another reason.

We are more sensitive to light so even the color images we look at are influencing us through light and dark more than anything else. Black and white removes the color information and communicates through luminance.

If anything this series is convincing me to shoot more and more in black and white to help me learn about light and contrast and harmony in luminance. Learning about light in isolation from color will build a stronger foundation for understanding hue and saturation when you add them back in.

Chiaroscuro

Similar to black and white photography, artists have been practicing with a technique called chiaroscuro for centuries. Chiaroscuro plays up the effect of light through the contrast between light and dark. It’s working without color, but it generates a great amount of dramatic effect.

Caravaggio often worked worked with chiaroscuro. His work features very dark backgrounds that hide much of the detail of the environment in order to shine a light on his subject. His work is somber, moody, and very dramatic.

Working with chiaroscuro will get you to push the envelope. You’ll make darker values darker and lighter ones lighter, increasing the contrast and dramatic effect.

Working with Grayscale

Hopefully I’ve convinced you that working in grayscale is a good way to learn more about color. When we remove chrominance information and we’re left with luminance or brightness or lightness, we’re on a scale from black to white with gray at all points in between.

Years ago when I was first attempting to work with color I often started color schemes entirely in grayscale. Once I felt good about the contrast between elements, I would play around with the hex values and increase of decrease the red, green, and blue components of the values.

For example if I was working with a light gray, say #cccccc, I might increase the red component while decreasing the green and blue resulting in #ddaaaa. I’d continue to adjust and refine until I ended up with something like #d59487.

I’m not sure it’s the best way to work, but I did gain more of an appreciation for luminance and contrast and I did learn to manipulate hex and rgb() values.

I hadn’t realized it at the time, but I was doing something similar to an exercise recommended by Joseph Albers. He recommended studying gradation through gray scale steps, the softer and more equal the steps, the more valuable.

Practicing with grayscale is a good way to start learning about color and once you gain an understanding of grayscale you can work with a single hue and again play around only with the light and dark of the color. You move from grayscale to monotone and eventually bring other hues into the mix.

Another way to make use of grayscale is to convert your design into grayscale. You can get an image of any page online as it would look in grayscale at GrayBit. It makes for a good check on the contrast in your color scheme.

As I was collecting information for this post Tom Osborne of Viget was running a series on how he chooses color schemes. I’ll leave you to read the series. It’s an interesting walkthrough for how Tom chooses colors at Viget. He starts in grayscale and builds a color wheel specific to a project. It’s an interesting and worthwhile read that I highly recommend.

Luminance Series From NASA and Ron Bigelow

Speaking of series, there were a couple more I came across while working on this series of post you’re reading. Instead of picking and choosing posts in each to link to, I thought I would just present them together.

First is a series of posts from NASA on working with luminance. It comes across as something of accessibility guidelines for NASA.

Next is a series by Ron Bieglow about perception, color, and luminosity. It’s a series I’ve come across before and may have linked to some of it previously. Here it is in its entirety.

Closing Thoughts

I covered a lot in this series and I know I threw a lot of math at you, that you’ll likely never use. Hopefully it helped make things clearer in regards to luminance and color as well as sorting out the differences in HSL, HSB, and HSV.

Because of the way our eyes work, luminance is the most important part of working with color and it’s the key to accessibility.

You can convert the hex and rgb colors you typically work with to grayscale to find their luminance and then compare luminance values to determine if enough contrast is present. More likely we’ll skip the math and head straight for a tool that does all the work.

I’ve found it can be helpful to work in grayscale at times and when you consider the history of art and design, I wouldn’t be the only one. Working only with light information is a good way to learn not only about light and dark, but about how to combine colors into schemes for use in a design.

The holidays are now upon us. Later in the week, I have something resembling a holiday poem for you. Next week, while many of us are taking a little extra time off, I’ll fill you in on how successful I was or wasn’t in completing my 2014 goals before setting new goals for 2015.

Download a free sample from my book Design Fundamentals.

The post Learn More About Color By Working In Grayscale appeared first on Vanseo Design.