Choosing the right color scheme is one of the most important decisions a designer can make. It gives the design feeling and grounds it as whole. Look around next time you go out and take time to notice the advertising that draws you in. Chances are, the designer planned the design around a set number colors to draw your eye, and then to guide you through the design.
At the same time, working with color can be challenging for many designers. When picking between this shade and that shade, it can be tricky to visualize the design as a whole. Rest assured, the pay-offs from spending the time to create a distinctive color scheme are worth it. What follows are some tips, helpful tools, and general thoughts on color schemes for designers.
Why use color?
1) Color simplifies a site and a limited pallet creates a sophisticated site.
2) Color affects how people interpret what they see as much as typography
3) Color is used to create emphasis and group elements and ideas
4) A refined color scheme lets the viewer know the content is worth reading.
Mea Cuppa
I’ll be honest—black and yellow for a bakery would have never occurred to me, but this site works beautifully. The yellow leaps off the page and pulls your eye to the detail of the daisies sitting atop the cupcakes. The design had a lot of text to work with on the homepage, but because of the emphasis on color I’m already sold. This page is a great introduction, because the rest of the site is equally amazing on the eyes.
Tom Dick and Harry
How do you make a site “manly,” but still cool? Take a look at this site. The impure black and greys make the site look like the designer really spent the time to tie in the vintage feel of the company’s design. The pop of the vibrant red-orange creates very well defined focal points as well. This site uses only three colors, but the right three colors to reinforce their brand image.
Buffalo
The black and off-white create a wide-open space, so much so that even though this site is placed on-grid, it gives a sense of expansiveness. The color is focused in the center of the design, keeping your eye grounded in the middle of the page. The simple color allows all the different patterns to seem fluid. Adding extra color could have made this design look really busy.
How to you find your color scheme?
Finding a color pallet is partially based on knowing your audience and partially on having the taste and experience of a designer; however, knowing what colors will work well—and finding them—can be an issue. Here are a few tools to help you in the discovery process:
Color Scheme Designer
A great system to manage color schemes for the web as it exports as html.
Kuler
Built into Adobe Illustrator and Photoshop, this system allows you to export color schemes you like into your swatches.
ColourLovers
Informative articles and peer based submissions. If you’re really into color, so is everyone else here, making it a great place to discuss color.
Degraeve
Creates a color pallet based on a raster image. Great for when you’ve been inspired by an image that can not be easily broken into a color scheme.
Advanced Corner
Check out SASS it’ll change the way you do color
Color schemes with SASS
So when I was told I needed to learn sass for work, I wasn’t sold at first. However after learning the color options available to me, I’m now able to make all the clever color combinations I could ever want within minutes of starting development.
If you read most anything on SASS, you’ll find you can create user defined color pallets by using $ and defining a variable.
On a separate mix-in file I create a color scheme doc and define my colors:
$primary_color: rgb(246, 169, 2)
$secondary_color: rgb(57, 43, 2)
$customblack: rgb(0,12,12)
etc.
From there I create any variation just by adding a couple simple lines,
lighten($primary_color, 10% )
Lighter($primary_color, 10% )
darken($primary_color, 10% )
darker($primary_color, 10% )
…and tint and shade any of my colors instantly without having to write out new colors, knowing they will each be effected identically.
You can even use RGBA to add transparency
…and lastly saturate:
saturate($primary_color, 20%)
desaturate($primary_color, 20%)
In Summary:
Color is a vital weapon in any designer’s arsenal. It will have an effect on your design if you do it well, or if you do it poorly. I’ve covered examples, tools, and some different ways to apply color schemes, so I hope you leave inspired to go out and visit these sites and try out new colors.