Creating Color Palettes
How to Design a Color Palette that Delivers Meaning
Color is one of the things that I’m sort of obsessed with within my personal and professional life. Color palettes speak volumes to me. They tell me what the person, event, or organization is about at its most intimate level. Each color carries with it tons of meaning through our mental associations. Take a look at the meanings of the basic colors, for starters:
Blue is the most popular color. It conveys peace, tranquility, harmony, trust, and confidence. Blues are an excellent complement to earth tones and neutral colors like gray and beige and work well with pastels and “cool” shades like greens. Lighter shades of blue make very nice backgrounds for casual and positive Web sites. Be careful when using orange with blue because these two colors vibrate against each other and cause a jarring visual effect. WARNING: blue is the worst choice when developing sites for food or cooking because there are no blue foods on earth, and it is known to be an appetite suppressant!
Beige is a neutral color. It suggests practicality and conservatism. It works nicely with earthy graphics, like browns and greens or blue and pink palettes as a background. Beige allows maximum readability as a background.
Black is sophisticated, mysterious, and classic. Black is the preferred background for an artist’s portfolio and works well for technical sites. Online reading can be difficult on a black background, but it can be done successfully using text colors that contrast heavily, such as white and neon colors.
Brown depicts stability, simplicity, and comfort. Sepia-toned photographs and designs using different shades of brown accented by colors like green and blue or red and orange will make this color work to its full potential. Brown is an excellent choice for a site featuring ideas of hearth and home or outdoor activities.
Green generates strong feelings. It can represent loyalty, intelligence, fertility, healing, food, and ecology or create negative images of reptiles, insects, and envy. It is a logical choice for financial sites. Avoid using red with green because they vibrate off each other, making reading extremely difficult.
Gray is the most conservative color. It represents practicality, security, reliability, and sadness. Use another neutral tone unless you desire to convey extreme conservatism.
Lavender generates feelings of romance, nostalgia, and daintiness. It is very popular for creative sites. It works well with other pastels, cool tones like blue and green, and as a highlight for a neutral gray.
Purple is the color of mystery, royalty, and spirituality. It is frequently the only choice for the unconventional and creative. Use a highly contrasting color for content to make your words readable if you use it as a background.
Orange is an enthused, vibrant, and expansive warm color. It can grate on your visitors’ nerves if you use too much of it. It makes a nice highlight color.
Red is intense and passionate. It’s an excellent accent color, especially when used with neutral colors. Combined with other warm tones like oranges, browns, and yellows, it could make your site stand out above others! Be careful when using it with green, blue, and purple because they can clash horribly.
Yellow depicts optimism, happiness, idealism, and imagination. Use it only when you want to convey bright, cheery feelings.
White is the color of cleanliness, purity, youth, simplicity, and innocence. It offers the best readability on screen as a background.
As a designer, I’m faced with trying to get the same color to be seen from RGB (electronics/monitors), CMYK (print), Pantone (print), and HEX (web) sets. Now add coated and uncoated papers, quirky inkjet, laser printers, and different monitors to that mix, and it is easy to see why creating something new that has to cross all these mediums can be a real headache! Once you learn that you are NEVER getting a perfect match, it all becomes a tiny bit easier. At home, I am not typically faced with exact color reproduction issues since it is rare to try to get an exact match in paint, fabric, plastic, and so forth.
Some time ago, I got the Pantone Color Bridge set for coated and uncoated papers to help me with the insane task of color matching. The set includes the Pantone, RGB, HEX, and CMYK values for each color. One would think this would take all of the work out of the whole issue, but it doesn’t. The first thing you notice is that when moving from Solid (Pantone, RGB, HEX) to CMYK, there is always some color difference that cannot be resolved. Even the most stringent perfectionist has to learn to accept that this is one area where perfection cannot be achieved.
The fact is, though, we all have to come up with color palettes in our lives on a fairly regular basis. These color palettes can be for the garden, rooms in our home, outfits, the house’s exterior, food, work presentations, marketing collateral, websites, displays, software programs, and so on. If you’ve ever stood in front of the sea of paint chips from various manufactures at the local home improvement store, you know how difficult it can be to get just the right shade. Most people will select a tone that looks close to what they are hoping for, one a tiny paint chip, only to find out that it is shockingly brighter or darker than they thought it would be. That is because how a color looks in small amounts is significantly different from it in large quantities due to lighting and surface differences. A good rule of thumb is to pick out the color you like and then go two shades lighter if you apply it to ample space, such as a wall or whole room.
Some people have a personal knack for putting colors together to get great visual results, and others couldn’t get it right on their own if their life depended on it.
So what do you do in this situation? You seek out inspiration and tools! Great sources of inspiration are pictures, store displays, and the Internet.
Here are some of my favorites:
COLOURlovers.com – a great place to discover and create colors, palettes, and patterns. You can use their tools to create a wide variety of background patterns for your website. Plus, they can link you to stock photos from istockphoto.com (another site I love!) for print or website design use. They have free registration and let you share your colors, palettes, and patterns with other users. Downloading palettes and patterns are simple and free.
Adobe Color – Adobe’s color tool that not only lets you browse palettes created by other users, but you can also tweak them, create your own, and even download them to files that work with Adobe’s creative design products. This is a great place to find sophisticated palettes.
Pantone – Find inspiration for your print and web projects. The user-created palettes display HEX, RGB, and Pantone color information.
Palette Generator – Do you have a photo that has the colors in it you would like to use? Upload it to this website, and it will generate a palette from it for you!
ColorToy – Flash-based color scheme generator and picker. It generates complementary color schemes based on your inputted color values or randomly, which is more fun. Use the random mode when you are seriously lacking the inspiration to get those creative juices flowing!
These tools can get you started selecting just the right palette for your next project. Take the best and leave the rest from various palettes until you have something uniquely appropriate for the project.
Categories:UX & UI, Website Design & Development, WordPress