Choosing colors has always been the elusive art of design for me personally. Picking a layout is not a big problem, choosing which colors go on which elements is pretty easy, but getting the exact right colors themselves is nigh impossible. I know what looks good, but I have never been able to get my color combinations to fit that bill. The notes below are some I return to time and again now whenever I need to pick colors.
Note that these notes are gleaned from the book The Principles of Beautiful Web Design from the second chapter. You can read the notes on Layouts from the first chapter.
Color Psychology
Obviously, colors convey meanings. However, these meanings vary not only from culture to culture, but from person to person. For example, "in Western cultures, white is considered to be the color of perfection, light, and purity." However, "in Chinese culture, white is a color traditionally associated with death and mourning." So be sure to research if your website is internationally targeted (or even if it is not!).
Tints, Shades, and Saturation
"The measure of the lightness or darkness of a color is known as its chromatic value. Adding white to a color creates a tint of that color. Likewise, a shade is produced by adding black to a given color. Tints tend to be associated with daylight, springtime, and childhood. If you were designing a website that is all about nightlife or concerts, for instance, you would probably want to go with dark shades and limit your use of light tints."
Warm vs. Cool Colors
Warm Colors - represent both heat and motion. When placed near a cool color, a warm color will tend to pop out, dominate, and produce visual emphasis
Cool Colors - are calming, and can reduce tension. In a design, cool colors tend to recede, making them great for backgrounds and larger elements on a page, since they will not overpower your content.
Traditional Red, Yellow, Blue Color Wheel
Primary colors
The primary colors of the traditional color wheel are red, yellow, and blue. These hues form an equilateral triangle on the color wheel, and commencing from a primary color, every fourth color represents another primary color.
Secondary colors
By mixing two primary colors, we create secondary colors, indicated here by the small gray triangles. The secondary colors are orange, green, and purple.
Tertiary colors
There is a total of six tertiary colors: vermilion (red-orange), marigold (yellow-orange), chartreuse (yellow-green), aquamarine (blue-green), violet (blue-purple), and magenta (red-purple). As you might already have guessed, mixing a primary color with an adjacent secondary color forms the tertiary colors.
"There is no color wheel that can fully describe the complexities of the way in which we perceive color from light."
Color Schemes
Six classic color schemes exist:
- Monochromatic - single base color and any number of tints or shades of that color
- Analogous - consists of colors that are adjacent to one another on the color wheel. As a rule of thumb, avoid having a slice that is bigger than one-third of the whole, or you are bound to make users sick.
- Complementary - consist of colors that are located opposite each other on the color wheel.
Warning: Since complementary colors are so different from each other in many ways, they can cause an effect known as simultaneous contrast when placed together: this is when each color makes the other appear more vibrant and dominant. This is actually what makes complementary color schemes so successful at moving visitors’ eyes around a composition. However, it can be horribly painful when complementary colors are used in a foreground–background relationship. Another common pitfall is to choose colors that are not directly opposite one another on the color wheel, yet are not close enough to be analogous colors. These combinations are known as discordants because the colors will often clash with one another, causing viewer discord. - Split complementary - use the two colors adjacent to your base color’s complement. Note that, since you are using your base color with two discordant colors, this type of color scheme can look juvenile and extreme, but that may be just the effect you want.
- Triadic - just push our split-complements out one more notch on each side, so that all the colors are equally spaced on the color wheel.
- Tetradic (also called double complementary) - combines any complementary color scheme with another complementary color scheme
Color Scheme Variants
Monochromatic with mo’ pop
Rather than just using tints and shades of your base color, try incorporating pure gray, black, and white. This will create more contrast, and more “pop” within a monochromatic color scheme.
Analo-adjust
Adjust the saturation of one of the colors in your monochromatic scheme up and adjust the others down. A highly saturated color will stand out when placed among muted colors. There should be no analo-guessing which one is the saturated color.
Mono-split-complement
If you have a good thing going with a split-complement color scheme but want to add some depth, try using a few tints and shades of your base color in the design.
Color Tools
- Color Scheme Designer - supports a variety of the aforementioned color schemes (highly recommended!)
- Adobe Kuler - similar to Color Scheme Designer, but lets you see and share with other users plus upload an image and have the colors auto-pulled from it
- COLOURlovers - even more palettes and color inspiration
- Pictaculous - upload an image and get a recommended palette (closest matching palette from Kuler and COLOURlovers too!). Caveat: you need an image with strong colors matching your desired palette.
