10 Ways to Use Colour (PT1)

Directly from the Adobe website, way to good of an article to not share!

In the end, if you can combine some of these ideas with your own design prowess, your work will attract eyeballs like geeks to a comic con. Check them out and let me know what you think by posting a comment.

1. Rely on red

For designers looking for an excitement-generating hue, the go-to color is red. Common sense, you say? Maybe. But researchers have proven that people exposed to ads with red in the design actually get more excited (read more). And an excited audience is an attentive audience—they’re more likely to gobble up whatever you’re trying to communicate.

TenWays-kuler-theme-reds-lightening

TenWays-kuler-theme-reds-darkening

2. Consider chroma

Unfortunately, drenching designs in red is not always an option. Fortunately, the same group of researchers from tip #1 also found that designers can use chroma to achieve similar excitement levels. Chroma, as you may recall, is a measure of the purity or intensity of color. Turns out, colors with a high degree of chroma/purity induce excitement. So, no matter what color you choose to work with, if you crank up the color purity, people will get all hot and bothered—and you’ll have their attention.

TenWays-chroma

3. Amp up the color contrast

Color contrast may be more important than both hue and chroma when it comes to attracting eyeballs. And by color contrast, I mean the difference between the color you are using to capture attention and the rest of the colors in your design.

Opposing points on the color wheel have high color contrast. In the example above, yellow (A) and blue (B) have high contrast.

To demonstrate the eye-popping abilities of high color contrast, I ran an experiment using an attention-prediction tool from Eyequant  that uses eye-tracking data and artificial intelligence to predict, with high accuracy, how different elements of a design capture attention. For this experiment, I measured the attention around a portion of a sample webpage design where I placed a red call-to-action button.

I chose red in this example for two reasons: First, as discussed in tip #1, red is supposed to be the champ when it comes to attention-grabbing abilities; and second, I wanted to use a color that was already represented in the design (a red sleeping bag) to decrease overall color contrast. To challenge red, I chose blue, which was not represented anywhere on the page.

Despite being a supposedly “calming” hue, blue absolutely trounced red. Blue increased the attention metric by 121 percent over a grayscale version of the button, whereas red managed only a 96 percent increase.
TenWays-red-vs-blue

4. Look for luminance contrast

Luminance contrast—the difference between the luminance of an object and its immediate background—is a color concept most of us don’t think about often enough. But, as you’ll see in my next experiment, luminance is an extremely important attention-stealer.

I compared the same blue button used in tip #3 with another blue button that had a higher luminance contrast with the white background. This time, the attention metric skyrocketed from 121 percent to 156 percent.

That’s a huge jump that tells us to not be afraid to crank that luminance dial.

TenWays-light-vs-dark-blue

5. Go for continual color change

As user-interface designers and psychology researchers can attest, you can divert attention to content by having it continually change color. Most of us experience this attention-shifting technique firsthand on a daily basis: Think of all those little icons on your smartphone or desktop that change color when they have something important for you to know. This is the same principle.

TenWays-color-use-in-ui

Now that you have the first five insights down, give them a try (I’d love to hear how it goes, so send me a note or post a comment). Read Part 2 with five more tips to grab attention with color.

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInEmail this to someone

Leave a Reply

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