April 22, 2010

Creating Your Own Color Palettes

Traditional Color Scheme Types

There are a number of predefined color scheme standards that make creating new schemes easier, especially for beginners. Below are the traditional schemes, with a few examples for each.

Colorwheel in Color Theory for Designer, Part 3: Creating Your Own Color Palettes
The basic, twelve-spoke color wheel is an important tool in creating color schemes.

Monochromatic

Monochromatic color schemes are made up of different tones, shades and tints within a specific hue. These are the simplest color schemes to create, as they’re all taken from the same hue, making it harder to create a jarring or ugly scheme (though both are still possible).

Examples:

Here are three examples of monochrome color schemes. For the most part with these schemes, the first color (if we look at this from left to right) would likely be used for headlines. The second color would be used for body text or possibly the background. The third color would likely be used for the background (or body text if color #2 was used as the background). And the last two colors would be used as accents or within graphics.

Monochrome-blue in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Monochrome-berry in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Monochrome-gold in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Analogous

Analogous color schemes are the next easiest to create. Analogous schemes are created by using three colors that are next to each other on the 12-spoke color wheel. Generally, analogous color schemes all have the same chroma level, but by using tones, shades and tints we can add interest to these schemes and adapt them to our needs for designing websites.

Examples:

Analogous-traditional in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

This is a traditional analogous color scheme, and while it’s visually appealing, there isn’t enough contrast between the colors for an effective website design.

Analogous-modified in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Here’s a color scheme with the same hues as the one above, but with the chroma adjusted to give more variety. It’s now much more suitable for use in a website.

Analogous-tradpink in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Another example of a traditional analogous scheme.

Analogous-modpink in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

And the above theme modified for use in a website design.

Complementary

Complementary schemes are created by combining colors from opposite sides of the color wheel. In their most basic form, these schemes consist of only two colors, but can easily be expanded using tones, tints, and shades. A word of warning, though: using colors that are exact opposites with the same chroma and/or value right next to each other can be very jarring visually (they’ll appear to actually vibrate along their border in the most severe uses). This is best avoided (either by leaving white space between them or by adding another, transitional color between them).

Examples:

Comp-purplegreen in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

A wide range of tints, shades, and tones makes this a very versatile color scheme.

Comp-redgreen in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Another complementary color scheme with a wide range of chromas.

Comp-orangeblue in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Don’t forget that beige and brown are really tints and shades of orange.

Split Complementary

Split complementary schemes are almost as easy as the complementary scheme. In this scheme, instead of using colors that are opposites, you use colors on either side of the hue opposite your base hue.

Examples:

Split-yellowgreen in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

A scheme where yellow-green is the base hue. It’s important to have enough difference in chroma and value between the colors you select for this type of scheme.

Split-red in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Another palette with a wide range of chromas.

Triadic

Triadic schemes are made up of hues equally spaced around the 12-spoke color wheel. This is one of the more diverse color schemes.

Examples:

Triad-berry in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Using a very pale or dark version of one color in the triad, along with two shades/tones/tints of the other two colors makes the single color almost work as a neutral within the scheme.

Triad-red in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Alternately, using one very bright hue with paired muted hues makes the single bright hue stand out more.

Double-Complementary (Tetradic)

Tetradic color schemes are probably the most difficult schemes to pull off effectively.

Examples:

Tetradic-red in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

A rather unimpressive tetradic color scheme. The best way to use a scheme like this is to use one color as the primary color in a design and the others just as accents.

Tetradic-pastel in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Tetradic color schemes can work well for creating color schemes with similar chromas and values. Just add a neutral (such as dark gray or black) for text and accents.

Tetradic-dark in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

It works just as well for darker color schemes.

Custom

Custom color schemes are the hardest to create. Instead of following the predefined color schemes discussed above, a custom scheme isn’t based on any formal rules. Keep in mind things like chroma, value, and saturation when creating these kinds of color schemes.

Examples:

Industrygiant in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

The colors here all have similar chroma and saturation levels.

Palisadespark in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Again, using colors with similar chroma and saturation is effective and creates a sense of cohesion across a color scheme.

50schristmas in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Using one color with a high chroma among other colors with lower chromas is another effective method (the higher chroma color can act as an accent).

Creating a Color Scheme

Creating your own color schemes can be a bit intimidating. But it’s not as complicated as many people think. And there are quite a few tricks you can employ to create great color palettes right from the start.

Danceofcolors in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

We’ve been over the different types of color schemes above. Now, let’s try creating a few of our own. There are plenty of tools online that will help you create a color scheme, but let’s forget about those for now and just use Photoshop.

Lets try breaking away from the color scheme types already mentioned, and create some custom schemes. While it’s important to know the ways that different colors interact and how traditional schemes are created, for most design projects you’ll likely create custom schemes that don’t strictly adhere to any predefined patterns.

So, for the purposes of our project here, we’ll create three color schemes each for two different websites. Our hypothetical clients are a modern architecture design blog and a high-end women’s clothing retailer who specializes in Victorian-influenced apparel.

We’ll start with a basic monochromatic scheme, just to get a feel for each. While I mentioned that traditional color scheme patterns aren’t used as often in design, monochomatic color schemes are the exception to that rule. You’ll likely find yourself using monochromatic schemes on a fairly regular basis.

Apparel-mono in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

For our apparel store, here’s a traditional monochromatic scheme, with white added in as a neutral.

Design-mono in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

For our design blog, we’ve gone with a color scheme made up of shades and tints of gray.

Apparel-one in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

This is almost an analogous color scheme, but we’ve left out one color. It’s made up of shades of purple and reddish-purple. These two colors fall next to each other on the color wheel, and work well together, especially when they’re used in different values and saturation levels.

Design-one in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Adding a couple shades of red to the gray color scheme adds a lot of visual interest and the potential for creating extra emphasis on certain parts within your designs.

Apparel-two in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Here, we’ve gotten rid of the purple hues and switched over to a burgundy. Again this is next to the reddish-purple on the color wheel. We’ve also added in a very pale yellow tone, which sits opposite purple on the color wheel. This serves as our neutral, and looks more like an off-white color when compared to our other hues.

Design-two in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

While this color scheme at first glance looks like another standard gray and red palette, if you look more closely you’ll see that the grays are actually tones of blue. Blue and red make up two thirds of a tetradic color scheme, but work just fine together without yellow, especially when the red is kept pure but the blue is toned down to the point of almost being gray.

Why Shades, Tones, and Tints Are Important

As you can see from the color schemes above, using tints, tones, and shades in your color schemes is vital. Pure hues all have similar values and saturation levels. This leads to a color scheme that is both overwhelming and boring at the same time.

Colorblotchedpaper in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

When you mix in tones, shades, and tints, you expand the basic 12-spoke color wheel into an infinite number of colors for use in your designs. One of the simplest ways to create a professional looking color scheme is to take a few tones, tints, and shades of a given color (avoiding the pure hue), and then add in another pure hue (or close to pure) that’s at least three spaces away on the color wheel (part of a tetradic, triatic, or split-complementary color scheme) as an accent color. This adds visual interest to your color scheme while still retaining a sense of balance.

Adding in Some Neutrals

Neutrals are another important part of creating a color scheme. Gray, black, white, brown, tan, and off-white are generally considered neutral colors. Browns, tans, and off-whites tend to make color schemes feel warmer (as they’re really all just tones, shades, and tints of orange and yellow). Gray will take on a warm or cool impression depending on surrounding colors. Black and white can also look either warm or cool depending on the surrounding colors.

Neutralcolors in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Black and white are the easiest neutrals to add into just about any color scheme. To add a bit more visual interest, though, considering using a very light or very dark shade of gray in place of white or black.

Adding browns, tans, and off-white hues are a bit trickier, but with some practice you’ll find adding them gets easier. For browns, consider using a very dark, chocolate brown in place of black. A pale off-white can be used in place of white or light gray in many cases. And tan can be used in place of gray, as well (create a tone by adding some gray to make it even easier).

Using Photos for Color Schemes

One of my personal favorite ways to create a color scheme is to use a photograph. There are automated tools online that can do this automatically for you (Adobe Kuler is one of them, and my personal favorite), or you can do it in Photoshop yourself.

Using Adobe Kuler, you can either browse or search for photos on Flickr, or you can upload your own image. If you’re stumped for what colors you want to use in a website design, try searching for related words on Flickr. Sometimes this can result in finding color schemes that you might not have thought of on your own.

Let’s try this method out, both ways (using Kuler and Photoshop). Find a photo you like on Flickr, one that you think evokes the feeling of the design you want to create. I chose this one:

Poppy in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Here’s the original color scheme that Kuler gives us when using this image:

Poppy-kuler-original in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

One of the coolest features Kuler has for creating color schemes from images is their “Select a Mood” option. Included here are Colorful, Bright, Muted, Deep, and Dark. These are the schemes we get when using each of those moods with the same photo:

Poppy-kuler-colorful in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Colorful

Poppy-kuler-bright in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Bright

Poppy-kuler-muted in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Muted

Poppy-kuler-deep in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Deep

Poppy-kuler-dark in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Dark

Now, let’s create a color scheme in Photoshop using the same image. This is a bit less scientific than the way Kuler does it. I usually just pick a color with the eyedropper tool, and then keep clicking on different spots in the image until I find other colors that go with it. Here are the results (this took less than five minutes to do in Photoshop, so it’s not as time-intensive as it sounds):

Poppy-photoshop in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Creating color schemes from images in Photoshop is easiest with images that are relatively monochromatic to begin with. With more colorful images, it gets trickier.

Let’s try another one, something more colorful this time. Here’s the original image we’ll work with:

Sari in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

And here are the five color schemes that Kuler gives us from this image:

Sari-kuler-colorful in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Colorful

Sari-kuler-bright in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Bright

Sari-kuler-muted in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Muted

Sari-kuler-deep in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Deep

Sari-kuler-dark in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Dark

And here’s what I came up with in Photoshop using the same image:

Sari-photoshop in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

As you can see, the Photoshop version I came up with is completely different than what Kuler came up with, but all of the schemes above are visually appealing. The Photoshop version here took a bit longer than the one above, partly because of the diversity of colors present in the image.

The Easiest Color Schemes

We’ve touched on this a bit before, but adding a bright accent color into an otherwise-neutral palette is one of the easiest color schemes to create. It’s also one of the most striking, visually. If you’re unsure of your skills in regard to creating custom schemes, try starting out with these types of palettes.

Here are a few examples to give you an idea of what I’m talking about:

Easiest-red in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Easiest-chartreuse in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Easiest-pink in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Easiest-lightblue in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Easiest-blue in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

You can see here how using browns instead of grays makes the entire scheme look warmer, even with the blue accent color.

You can use tones of any color instead of gray or brown in this type of scheme, just keep it very close to the gray end of the spectrum for the most fool-proof results. As a general rule, cool grays and pure grays are best for more modern designs. For traditional designs, warmer grays and browns often work better.

How Many Colors?

You’ll notice that throughout this post we’ve used color schemes with five separate colors. Five is a good number that gives plenty of options for illustrating the concepts here, and it’s a workable number in a design. But feel free to have more or fewer colors in your own schemes.

Coloredpencils in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

A lot of websites might only use three colors in their designs. Others use only two. And some might use eight or ten (which is a lot trickier than using fewer colors). Experiment and use as many or as few colors as you need to for your design. But you may want to start with a palette of five colors, and then add or subtract as you see fit and as you progress through the design process.

The easiest way to add a color is to start with one of the predefined, traditional color schemes and then work out from there. That at least gives you a bit of direction as far as which other colors to consider.

10 Sites With Great Color Schemes

To give you more inspiration, here are ten websites that have excellent color schemes. Some of the schemes below might look a bit odd at first glance but seeing how they’re actually used shows the wide range of possibilities color schemes can present.

Wentings Cycle & Mountain Shop

Wentings in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Scheme:

Wentings-scheme in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Trivuong.com

Trivuong in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Scheme:

Trivuong-scheme in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Oscar Barber

Oscarbarber in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Scheme:

Oscarbarber-scheme in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

North East Peace III Partnership

Northeastpeace in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Scheme:

Northeastpeace-scheme in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

mbA Architects

Mbaarchitects in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Scheme:

Mbaarchitects-scheme in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Studio 13

Studio13 in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Scheme:

Studio13-scheme in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Joy Project

Joyproject in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Scheme:

Joyproject-scheme in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Morphix Blog

Morphixblog in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Scheme:

Morphixblog-scheme in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

El Designo

Eldesigno in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Scheme:

Eldesigno-scheme in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

LemonStand

Lemonstand in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Scheme:

Lemonstand-scheme in Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Conclusion

We’ve really only just touched on color theory in this series. There are specialists out there who have literally spent years refining their ability to choose colors that are appropriate to any situation.

The best way to learn to create beautiful color schemes is to practice. Create a scheme on a daily basis. You can use automated tools to do this at first (like Kuler’s tool for creating schemes from images), or just open up Photoshop and start. If you see a particularly beautiful or striking color in your daily life, try creating a scheme around it. And take advantage of all the sites out there that let you upload your color schemes and organize them for later reference. This makes all those color schemes more practical and easier to use in the future.



From SmashinMagazine

No comments: