Many developers and designers I talk to are very frustrated when it comes time to pick colors for a project. It can be hard to choose the right color or set of colors for a project. I want to share with your five quick tips for using color in your next project so you can make the best user experience possible.
Color should support the message and goals of your project. Keep your goals in mind as you make color choices and you will be way ahead of most people.
1. Different shades and tints of the same color can have a very different impact.
Sophisticated colors have been heavily mixed with other colors and darkened or lightened. An example of this is Tiffany blue. It is iconic and represents feminine sophistication and timeless elegance. It is also a great neutral backdrop for the spectacular jewelry the company is known for. Pantone created a very interesting documentary about the color. You can watch the documentary here.
Most sports teams have very vivid colors so they easily stand out – they are aggressive and loud to the eyes. They are often very close to or are primary colors with very little mixing with anything else. They do their job – grab attention and make it easy to spot team mates on the field. Alive campus put together a united states map showing college sports teams. You can see what I mean when you take a look at it:
A lot of reds and blues used for team colors. Yellow seems to be the next most popular then orange. While a few of the reds are darker garnet and crimson, most of them are pretty vivid.
2. User Testing Can Give Valuable Objective Feedback Early On
Testing color options as early as possible with prototypes can save a lot of time and money. A/B testing can also be used to test the appeal of two different colors in product features, way finding success in games, the list goes on. Testing gives us data that can be used to make objective decisions that are focused on the goals of the project and not tainted with subjective preferences of the creators.
3. Color Can Evoke a Time Period, Culture, Location, Memory, or Feeling
Game designers use this to their advantage to craft environments in their games for specific factions, locations, visually express a mood and provide way finding elements with light and shadow. The same color can have very different meanings, so the context of the color with words, images and tone matters. Color used in combination with other story elements can create a truly immersive experience. Colors used should be a good fit not only for goals but a match for the undercurrent of feeling and time of a project. Dark grays combined with a few bright neon pinks and greens and oranges makes for a fun halloween game for kids. These same grays paired with rusty reds and browns have a more adult feel to them.
4. People Who Are Color Blind See Color Differently, So CONTRAST Is King.
It is estimated that about 8% of people are color blind. This does not just include red-green color blindness (which is actually four different conditions of which Deuteranomaly, affecting the green cones is the most common at 5% of the population ) many of us are familiar with. This is a usability problem that directly affects sales and the success rate of web sites and programs. Better usability benefits everyone. The easiest way to provide the best experience for everyone is to use colors that have high contrast with each other in critical areas such as call to action buttons and copy text. This is can be tested using tools such as or by performing user tests. Visit the National Eye Institute to learn more about color blindness.
5. Use Grayscale To Test Color Hierarchy
Color is supports the message and functionality of a project. It should not have the starring role. How can you test if you are using color to give users clear color hierarchy so they know where to go? Take it out! You can use a variety of tools to gray out screens, including just popping a mockup screen into Photoshop for a quick look. When you remove the ability to see the saturation of the colors, it is amazing the inconsistencies you can spot. Can you still tell where to go without the full color? If shading and highlights are critical to the user experience, do those hold up well when turned to grayscale?
6. Bonus Tip: Use the Terrific Trio of Icon, Text and Color
Text and/or icons should always be paired with color when it is part of an action, such as a “trash” screen or a button. The best practice is to use color to support the message of an icon and text pair. This trio works well to attract user attention and score high in usability. More and more I am seeing these three working together. Examples include “Done” next to a green checkmark”, a red overall that appears when someone presses then drags an icon so they know where the delete area is and recently I have noticed the mobile version of Amazon’s site uses a tiny hand icon in dark green matched with text over a lighter green button.
I hope you enjoyed these tips on color. What do you struggle with when it comes to color?
I’m building an app to put a color expert in your pocket. I’d really appreciate any suggestions you have about features!