Color, glorious color!

color-wheel-smallWe’ve all been subjected to presentations, and let’s be honest created some as well, where the background is white and the text is black or dark blue. Another variation that was popular several years ago was the blue background with yellow text presentation. The theory being that you could easily see/read the presentation and because the author/speaker had such interesting information to impart, it was the best choice. Sounds good in theory, but in reality it is BORING!  Not only that, we need to remember that vision trumps all other senses (Medina) and it is important to keep slides interesting and attention grabbing.

In my last blog post I talked about fonts. Fonts and color go together like a hot dog and a bun or peanut butter and jelly or….well, you get the picture. That doesn’t mean you should go crazy with color during your presentation, but a pop of color is always welcome.

Since I already mentioned, vision trumps all other senses, here’s a few versions of a slide that is part of a presentation I created for a class I am teaching:

withoutcolor-image  withcolor-image

Note that the slide on the left has two colors, black and blue. It has two fonts, Ariel and Times New Roman, using the old adage that it is best to use a San Serif font for title and Serif font for text (see previous blog post for explanation) as well as using two fonts that we see all the time. There is no picture, the bullets are the same as the text that follows and there is no background image. It’s easy to read, which is important, but it is also BORING!

The slide on the right, is the same information. The differences are the font used (Calibri for both) the bullets, the background and the image added. Although I stuck with Calibri for the font, I changed up the color and added an image to the title (6). The presentation is about the 8 neurological constructs and I wanted the number to stand out as a reminder and an attention grabber. The title color is in the orange range, picked directly from the sidebar image as is the blue in the number. The contrast between blue and orange is also a good one. If you look at the color wheel above, note that yellow, orange and brown are opposite blue, making them complimentary colors. Complimentary colors are used for big effect, so should be used minimally, such as they are used here.

I had a little fun with the bullets, using images of the brain. The text is blue, but two different shades. I could have gone a little further and made the detailed text the same color as the title, which is something I do regularly, but in this case, the color orange is not a good one for readability and should be reserved for titles, or limited amounts of text.

The side image is one I use for all my brain related presentations for continuity. It’s a firing neuron, so it is apropos to the subject matter. The image of the dancer within the slide, is visually arresting and has meaning for the slide because it is about movement. These are small differences, but they show how just doing something simple can create interest and keep the attention of the viewer.

Another issue to keep in mind is the use of the color red. I see it used all the time because it denotes something important. The problem is that some people with red/green color blindness, particularly with digital presentations, see faded brown text or next to nothing at all. This is a small part of the population, but in my organization, I can name three people out of less than 160 who have the problem. Due to this issue, I suggest you use red sparingly and when you do stay away from true red. Use it for bullets or something similar, but do not use it for important information.

When you are starting a presentation or creating a website, poster or flyer, look carefully at the colors you choose. One way to do this is to use the Adobe Color Wheel CC. It is a free program. All you need is an Adobe ID. If you don’t have one, it is easy to sign up. The color wheel shows you your options for the color rules, one of which I discussed earlier, with the use of color rules. Below are examples of the different color rules using images from Adobe Color using the color RGB 57, 186, 219.

analogous-smallAnalogous – side by side colors.  Note the variations of blue below the color wheel. It is similar to the monochromatic, but has a larger sample range. Click on the image to see a larger version of the file.

monochromatic-smallMonochromatic – same color section of the wheel in varying shades. It is similar to analogous, but all shades are from the same section and the sample range is less dramatic. Click on the image to see a larger version of the file.

triad-smallTriad – Three distinct areas of the color wheel that compliment and contrast with each other. It works well when you want to have multiple colors that are distinctly different but not jarring. Click on the image to see a larger version of the file.

complimentary-smallComplimentary – opposite sides of the color wheel for a big effect that also are visually pleasing. Click on the image to see a larger version of the file.

compound-smallCompound – a variation of the complimentary rule using the base color and one analogous color and one complimentary color. Click on the image to see a larger version of the file.

shades-smallShades  – different shades of the base color. Click on the image to see a larger version of the file.

RGB stand for red, green blue and is the color choice for the web and most regular programs and uses red, green and blue to mix the other colors in the spectrum. For print, designers often use CMYK, which stands for Cyan, Magenta, Yellow and Black, which are the colors used for the spectrum. CMYK has many more color choices, but the web and most programs do not accept CMYK colors and even if they do, the difference is not appreciable.

Whatever colors you choose, be consistent and keep it simple, clean and easy to read. Next week, we’ll talk images in presentations.


Reference: Medina, J. Brain Rules.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s