Up at 5AM: The 5AM Solutions Blog

A Review of Color in UX Design - 4 Tips on Designing a Color Palette

Posted on Thu, Dec 12, 2013 @ 06:00 AM

In our first two blog posts on color in UX design, Color Limitations and Color and Emotions we looked at some interesting facts about color and some of the context around their meaning. Part three brings these ideas together and provides tips for choosing color palettes for you designs and graphics.


1. Create Harmonies

When creating a color palette one option is to create a color harmony. Pick a color, any color. As most of us learned in school, that color has an opposite or complementary color. Red and green, blue and orange, yellow and purple are all complements of each other. These colors are opposite each other on a color wheel. But did you know there are other patterns or color harmonies? Color Tiger’s  ‘Color Harmonies - basic techniques for creating color schemes’ article does a nice job of explaining the different harmonies, and tools like their Color Impact 4, Adobe’s Kuler, and Colourlovers’ Copaso all help you create color harmonies.


2. Use Tints, Shades, Saturation, Warm and Cool Instead of Additional Colors

Often, when choosing colors for a design or graphic, we are sometimes too quick to jump to a new hue, giving our work a rainbow effect. Instead, consider adjusting a limited color palette of two to three colors by adding white, knowing as creating tints; adding black, known as creating shades; and adding greys, known as desaturation. Additionally, you can adjust your colors by moving your colors left or right on the color wheel, which is know as making your colors warmer or cooler. This can be seen in the analogous color harmony above where the main color is in the middle; the warmer colors, or colors that move more toward the reds and oranges, are to its right; and the cooler colors, or colors that move toward blues and greens are to its left.

3. Remember to Balance Your Color with Different Weights

When design a color palette it is good to remember that you should not treat your colors equally. Remember the typography rule:


The same applies in color. Make one color your primary color and use the rest to accentuate that color. When in doubt, you can always use the 60-30-10 rule, mentioned in this article by HGTV on interior decorating. Companies such as Ubuntu even use different amounts of the same color palette to communicate differences of emphasis in content, as well as different sub-brands.

source: http://design.ubuntu.com/brand/colour-palette

When you are dealing with many brands such as the case with Adobe you may need to expand your palette beyond a few colors into the aforementioned rainbow effect, but the color balance principles still applies. Notice how there graphic design based products, Illustrator and InDesign, are analogous and are pink and orange; the web products, Dreamweaver and Muse, are cool and warm versions of green; the video products, After Effects and PremierPro are a saturated and desaturated version of two violets that are very close; and Photoshop, Adobe’s flagship photography product, is blue. Additionally, looking at the Adobe’s packaging across the years, you can see that these principles are not lost on the company’s design team. Even though the current branding material has a lot going on (it is my favorite set) you can still identify the key color in the image.

Source: https://www.adobe.com.


4. “Good Artists Borrow, Great Artists Steal.  —Pablo Picasso”

Why reinvent the color wheel? Good color palettes come from many sources such as interior design, fashion, or nature. However, if you are using an image with your graphic or page, why not pull your colors from there? In the palette below is pulled directly from the image.

In addition to the great tools already mentioned for creating a color palette, try browsing those same sites for palettes created by other color-files.



Tools and Pre-Design Palettes

Browser Plugins


-Leigh Boone





Tags: UX, Color


Diagnostic Tests on the Map of Biomedicine


Download the ebook based on our popular blog series. This free, 50+ page edition features updated, expanded posts and redesigned, easier-to-read maps. 

FREE Biobanking Ebook

Biobanking Free Ebook
Get this 29 page PDF document on how data science can be used to advance biorepositories.

 Free NGS Whitepaper

NGS White Paper for Molecular Diagnostics

Learn about the applications, opportunities and challenges in this updated free white paper. 

Recent Posts