Here’s a quick overview of what we’ll be looking at today:
- Using Color Models
- How Many Colors?
- Monochromatic
- Analogous
- Complementary
- Triadic
- Custom Color Schemes
- Using Photos
- Examples in Web Design
- Examples in Mobile UI
- Examples in Illustration
Using Color Models
As we explained in Part 1, there are a number of different color models for different purposes. However when creating color schemes, I find the HSV/HSL models the easiest and most intuitive way to define colors. As we discussed, these color models were created for the very purpose of making color picking a more intuitive process as you don’t need to think about mixing different amounts of either RGB or CMYK to define colors.
On another note, when defining your colors, it’s best practice to stick to one model to choose your colors. Going back and forth between models can be messy.
However if you find RGB, CMYK or even LAB an easier way to choose your colors, by all means feel free to use them.
How Many Colors?
This is one of the most asked questions when creating color palettes. In general, it’s best to choose a total of 4 colors, plus a neutral to balance things out. Of course, this all depends on what kind of project you are working on and what kind of palette you are creating. For example, if you’re designing a logo, you would probably use only 2-3 colors, compared to a complex poster that might use up to 10.However, for more complex matters, such as illustration, I find it’s always good to start a design with a 5 color palette and then build from there if needed.
Ultimately the number of colors you use is up to you. However we will be using 5 colors for our palettes in this article.
Monochromatic
A monochromatic color palette uses different amounts of saturation and brightness values of a specific hue to form a color scheme. This makes it probably the easiest type of color palette to master, as there isn’t as much to consider as others.You can play around with them and use slightly different hues if you like, however I find it works best if you use only one. Below are three examples of monochromatic color palettes, all using the exact same hue.
Analogous
An analogous color palette is created by choosing 3 colors that are next to each other on the color wheel. Generally speaking, if you’re creating a 5-color palette for the purposes of web design, this would result in the 3 colors, a darker version of one, and a neutral to balance things.A simple analogous color palette. Left to right – Color 1, Color 2, Color 3, Darker blue, Neutral.
The same palette, only slightly modified for the web. Left to right – Color 1, Color 2, Color 3, Neutral, Dark Blue Offset.
Complementary
A complementary color palette, as the name suggests, uses opposite (complementary) colors to form a palette. In an effective scheme, this generally means 1 base color, its complementary, 2 shades of the base, plus one neutral. Using this formula will usually create a humongous color scheme to work from.A traditional complementary color palette. Left to right – Base color, base color shade 1, base color shade 2, base color complementary, neutral.
The same color palette modified for web use. Left to right – Base color, base color shade, complimentary, neutral, neutral.
Triadic
A triadic color palette traditionally uses 3 equally spaced hues on the color wheel. However this doesn’t necessarily have to be the case. For more or less contrast, you can adjust two of the points to create variations.For a 5-color palette, choose your triadic base, a darker shade of one, plus a neutral.
A traditional Triadic color palette. Left to right – Color 1, color 2, color 3, neutral, darker shade.
The same color scheme optimized for the web. Note instead of a darker neutral, we have a white and light gray. There is already enough contrast between the other colors, so no need to contrast a dark gray or black with white.
Tetradic
A tetradic palette uses four colors. There are several ways to construct a tetradic color palette. In a traditional system, this would use four exact opposites and a neutral.A traditional tetradic color palette. Four complimentary colors.
However this doesn’t necessarily need to be the case. You can use them in pairs. For example a pair of analogous colors, with a complementary pair of analogs.
Another tetradic color model – Analogs of blue and purple with their complements orange and yellow.
Custom Color Schemes
In theory, the techniques covered above are the most common and basic ways to create color schemes. However they can look a little unnatural and lacking in personality. When I’m designing for the web, I tend to choose what kind of palette I’m going to use, create a base scheme and then tweak the colors slightly so it looks more aesthetic.For example, here at Pencil Scoop, we use a complimentary color palette for our web design. We use a red accent color, a very dark blue/gray complementary, with a darker shade and white neutral with a gray shade.
Left to right – Accent (red), neutral (white), neutral shade (gray), complementary (gray/blue), complementary shade (deep blue).
Using Photos
Using photos to form a color palette is something pretty subjective, some love it, others hate it. In general it’s a really underestimated technique. However, as I’m about to show you, very effective and dynamic.The theory behind it, is that nature and natural environments, feature ready-made organic color schemes. Personally, I highly recommend this method and find it a really useful way to produce palettes.
If you use this technique, try to find natural photos, that have not been edited or filtered in any way. Then simply define the type of color palette you want to create, and get picking.
There are a number of free online tools that can do the work for you like Adobe Kuler. However you should still choose the colors by hand. Let’s look at an example.
Lavender is a great example of natures ability to produce organic color palettes. While the flowers themselves are a lavender-purple, their stems are a contrasting green (the complementary of purple). Furthermore, bees are often found retrieving nectar from the flowers, providing an extra color to create even more interesting palettes. Let’s see how many color palettes we can make from this one photo.
Let’s make a simple monochromatic color palette from this photo:
Now an analogous:
And a complementary:
A triadic color palette:
A tetradic palette:
And finally, something suitable for a traditional web design:
As you can see, we can pretty much make every type of color palette from this single photo. There are literally thousands of different colors within this photo, meaning you can make so many different palettes.
Let’s now take a look at different color palettes found in some well designed examples on the web.
Examples in Web Design
Examples in Mobile UI
Examples in Illustration
0 comments:
Post a Comment