色彩设计相当主观。它在某人身上可能唤醒一种反应，但在另一人身上则可能出现截然不同的反应。有时候这要归因于个人喜好，有时候则与文化背景有关。色彩理论本身就是一 门科学。研究色彩如何影响不同的个人或群体，是某些人的事业方向。像改变准确色度或色彩饱和度这种简单的行为，也可能唤起完全不同的情感。文化差异意味着在某个国家象 征快乐与振奋的事情在另一个国家可能就会演变成悲伤与沮丧。
当你混合了色调，阴影和浅色时，你将把基本的12色色环扩展成无数种颜色并用于你的设计中。创造专业的配色方案的一种简单方法便是利用一些色调，浅色和特定颜色（避免纯 色）的阴影，然后将其添加到在色环中至少隔了三个颜色的另一个纯色（或接近纯色）中作为强调颜色。这不仅能够为你的配色方案添加一种视觉乐趣，同时还能保留一种平衡感 。
关于创造配色方案我个人最喜欢的一种方法便是使用照片。网上有许多工具能够自动为你做到这点（游戏邦注：Adobe Kuler便是其中一种，也是我个人最喜欢的一种），或者你可 以自己用Photoshop完成它。
使用Adobe Kuler，你便可以在Flickr上浏览或搜索照片，或者你也可以上传自己的图像。如果你不知道在网站设计中该使用怎样的颜色，你可以尝试着在Flickr搜索关键字。有时 候你将找到一些自己都没想过的配色方案。
Wentings Cycle & Mountain Shop
学习创造优秀的配色方案的最佳方法便是不断实践。每天都能创造方案。一开始你可以使用自动化工具做到这点（游戏邦注：就像Kuler通过图像创造方案的工具），或者只是打开 Photoshop然后开始创造。如果你在每日生活中看到一个特别好看或醒目的颜色，你便可以尝试着围绕它去创造一个方案。利用所有能够让你上传配色方案的网站然后为之后的参考 将其组织起来。这让所有的配色方案可以变得更使用且能够更轻松地用于之后的设计。
Web Design Ledger涵括了寻找并创造颜色调色板的10种出色工具。
100 Random Colors 2.0
来自Color Wheel Pro的这篇文章详细描述了所有传统的配色方案，并列举了相关例子。
Color Theory for Designers, Part 1: The Meaning of Color
By Cameron Chapman
Color in design is very subjective. What evokes one reaction in one person may evoke a very different reaction in somone else. Sometimes this is due to personal preference, and other times due to cultural background. Color theory is a science in itself. Studying how colors affect different people, either individually or as a group, is something some people build their careers on. And there’s a lot to it. Something as simple as changing the exact hue or saturation of a color can evoke a completely different feeling. Cultural differences mean that something that’s happy and uplifting in one country can be depressing in another.
This is the first in a three-part series on color theory. Here we’ll discuss the meanings behind the different color families, and give some examples of how these colors are used (with a bit of analysis for each). In Part 2 we’ll talk about how hue, chroma, value, saturation, tones, tints and shades affect the way we perceive colors. And in Part 3 we’ll discuss how to create effective color palettes for your own designs.
Warm colors include red, orange, and yellow, and variations of those three colors. These are the colors of fire, of fall leaves, and of sunsets and sunrises, and are generally energizing, passionate, and positive.
Red and yellow are both primary colors, with orange falling in the middle, which means warm colors are all truly warm and aren’t created by combining a warm color with a cool color. Use warm colors in your designs to reflect passion, happiness, enthusiasm, and energy.
Red (Primary Color)
Red is a very hot color. It’s associated with fire, violence, and warfare. It’s also associated with love and passion. In history, it’s been associated with both the Devil and Cupid. Red can actually have a physical effect on people, raising blood pressure and respiration rates. It’s been shown to enhance human metabolism, too.
Red can be associated with anger, but is also associated with importance (think of the red carpet at awards shows and celebrity events). Red also indicates danger (the reason stop lights and signs are red, and that most warning labels are red).
Outside the western world, red has different associations. For example, in China, red is the color of prosperity and happiness. It can also be used to attract good luck. In other eastern cultures, red is worn by brides on their wedding days. In South Africa, however, red is the color of mourning. Red is also associated with communism. Red has become the color associated with AIDS awareness in Africa due to the popularity of the [RED] campaign.
In design, red can be a powerful accent color. It can have an overwhelming effect if it’s used too much in designs, especially in its purest form. It’s a great color to use when power or passion want to be portrayed in the design. Red can be very versatile, though, with brighter versions being more energetic and darker shades being more powerful and elegant.
The dark shades of red in this design give a powerful and elegant feel to the site.
The true red accents stand out against the dark black background, and give a powerful and high-end feeling to the site.
The very bright red accents on this site give a sense of energy and movement.
The dark red on this site, because it’s combined with grunge elements, seems more like the color of blood.
Dark red, when combined with white and gray, gives a very elegant and professional impression.
Orange (Secondary Color)
Orange is a very vibrant and energetic color. In its muted forms, it can be associated with the earth and with autumn. Because of its association with the changing seasons, orange can represent change and movement in general.
Because orange is associated with the fruit of the same name, it can be associated with health and vitality. In designs, orange commands attention without being as overpowering as red. It’s often considered more friendly and inviting, and less in-your-face.
The bright orange box draws attention to its contents, even with the other bright red elements on the page.
Orange is used here in its most obvious incarnation, to represent fire.
The dark orange, when set against the lime green, almost acts as a neutral and grounding color here.
Orange is used here to give a friendly and inviting impression.
The orange accents here add a lot of visual interest and bring attention to the call to action.
Yellow (Primary Color)
Yellow is often considered the brightest and most energizing of the warm colors. It’s associated with happiness and sunshine. Yellow can also be associated with deceit and cowardice, though (calling someone yellow is calling them a coward).
Yellow is also associated with hope, as can be seen in some countries when yellow ribbons are displayed by families who have loved ones at war. Yellow is also associated with danger, though not as strongly as red.
In some countries, yellow has very different connotations. In Egypt, for example, yellow is for mourning. In Japan, it represents courage, and in India it’s a color for merchants.
In your designs, bright yellow can lend a sense of happiness and cheerfulness. Softer yellows are commonly used as a gender-neutral color for babies (rather than blue or pink) and young children. Light yellows also give a more calm feeling of happiness than bright yellows. Dark yellows and gold-hued yellows can sometimes look antique and be used in designs where a sense of permanence is desired.
The bright yellow header and graphics used throughout this site give a sense of energy and positivity.
The light yellow is used almost as a neutral in the header here, and combined with the hand-drawn illustrations gives a very cheerful impresison.
The bright yellow accents bring attention to the most important parts of this site.
The bright yellow sunflower reminds visitors of summer on this site, and combined with the antique-yellow background, it gives a homey and established feeling.
The bright yellow header here adds a bit of extra energy to this design.
Cool colors include green, blue, and purple, are often more subdued than warm colors. They are the colors of night, of water, of nature, and are usually calming, relaxing, and somewhat reserved.
Blue is the only primary color within the cool spectrum, which means the other colors are created by combining blue with a warm color (yellow for green and red for purple). Greens take on some of the attributes of yellow, and purple takes on some of the attributes of red. Use cool colors in your designs to give a sense of calm or professionalism.
Green (Secondary Color)
Green is a very down-to-earth color. It can represent new beginnings and growth. It also signifies renewal and abundance. Alternatively, green can also represent envy or jealousy, and a lack of experience.
Green has many of the same calming attributes that blue has, but it also incorporates some of the energy of yellow. In design, green can have a balancing and harmonizing effect, and is very stable. It’s appropriate for designs related to wealth, stability, renewal, and nature. Brighter greens are more energizing and vibrant, while olive greens are more representative of the natural world. Dark greens are the most stable and representative of affluence.Examples
The extremely muted greens of this site give it a very down-to-earth and natural feeling.
The bright green header of this site mixed with the leaf motif gives it a very natural and vibrant feeling.
The more olive-toned green of this site gives it a natural feeling, which is very appropriate for the content.
The brighter, more retro-looking greens of this site give it a very fresh, energized feeling.
Another olive green site with a very natural feeling.
Blue (Primary Color)
Blue is often associated with sadness in the English language. Blue is also used extensively to represent calmness and responsibility. Light blues can be refreshing and friendly. Dark blues are more strong and reliable. Blue is also associated with peace, and has spiritual and religious connotations in many cultures and traditions (for example, the Virgin Mary is generally depicted wearing blue robes).
The meaning of blue is widely affected depending on the exact shade and hue. In design, the exact shade of blue you select will have a huge impact on how your designs are perceived. Light blues are often relaxed and calming. Bright blues can be energizing and refreshing. Dark blues are excellent for corporate sites or designs where strength and reliability are important.
The dark blues give this a feeling of reliability, while the brighter and lighter blues keep it from feeling staid.
The dark blue gives this a site a professional feeling, especially when combined with the white background. But the lighter blue accents add a bit more interest.
The bright, sky blue of this site gives it a young and hip feeling, which is emphasized by the reddish accents.
This site combines a range of blues, which gives it a refreshing feeling overall.
The light, muted blue of this site gives a very relaxed and calm impression.
Purple (Secondary Color)
Purple was long associated with royalty. It’s a combination of red and blue, and takes on some attributes of both. It’s associated with creativity and imagination, too.
In Thailand, purple is the color of mourning for widows. Dark purples are traditionally associated with wealth and royalty, while lighter purples (like lavendar) are considered more romantic.
In design, dark purples can give a sense wealth and luxury. Light purples are softer and are associated with spring and romance.
The dark shade used here evokes the royal heritage of purple, which is very appropriate for the Asprey luxury goods brand.
The light and medium purples here work well to convey a sense of creativity.
The brighter, more reddish purple of this site gives it both a rich and energetic look.
The dark purple background here adds to the creative feeling of the overall site.
The dark purple accents on this site give a sense of luxury and refinement.
Neutral colors often serve as the backdrop in design. They’re commonly combined with brighter accent colors. But they can also be used on their own in designs, and can create very sophisticated layouts. The meanings and impressions of neutral colors are much more affected by the colors that surround them than are warm and cool colors.
Black is the strongest of the neutral colors. On the positive side, it’s commonly associated with power, elegance, and formality. On the negative side, it can be associated with evil, death, and mystery. Black is the traditional color of mourning in many Western countries. It’s also associated with rebellion in some cultures, and is associated with Halloween and the occult.
Black is commonly used in edgier designs, as well as in very elegant designs. It can be either conservative or modern, traditional or unconventional, depending on the colors it’s combined with. In design, black is commonly used for typography and other functional parts, because of it’s neutrality. Black can make it easier to convey a sense of sophistication and mystery in a design.
The black accents, mixed with the brighter colors and very dark brown background add an edgier look to the overall design.
Black, when mixed with icy blues, looks colder.
The black here, mixed with dark grays and lime green, and an overall grungy theme, adds to the edginess of the design.
The black accents here add an extra layer of sophistication and modernity to the site.
The strong black accents on this site add to the overall sophistication of the design.
White is at the opposite end of the spectrum from black, but like black, it can work well with just about any other color. White is often associated with purity, cleanliness, and virtue. In the West, white is commonly worn by brides on their wedding day. It’s also associated with the health care industry, especially with doctors, nurses and dentists. White is associated with goodness, and angels are often depicted in white.
In design, white is generally considered a neutral backdrop that lets other colors in a design have a larger voice. It can help to convey cleanliness and simplicity, though, and is popular in minimalist designs. White in designs can also portray either winter or summer, depending on the other design motifs and colors that surround it.
The white on the Fuelhaus site is used to contrast against the electric blue.
White backgrounds are very popular on minimalistic sites, and provide great contrast to black typography.
Here, white is used as an accent color, which lightens the overall effect of the site.
White combined with gray gives a soft and clean feeling to this design.
Again, white used as a background lightens the whole design.
Gray is a neutral color, generally considered on the cool end of the color spectrum. It can sometimes be considered moody or depressing. Light grays can be used in place of white in some designs, and dark grays can be used in place of black.
Gray is generally conservative and formal, but can also be modern. It is sometimes considered a color of mourning. It’s commonly used in corporate designs, where formality and professionalism are key. It can be a very sophisticated color. Pure grays are shades of black, though other grays may have blue or brown hues mixed in. In design, gray backgrounds are very common, as is gray typography.
Light gray gives a very subdued and quiet feeling to this design.
The light gray background here adds to the modern feeling created by the typography.
The cooler gray on this site gives a modern, sophisticated feel to the site.
The dark gray backround and lighter gray typography lend a decidedly modern look to this design.
The wide spectrum of gray shades used in this design combine to give a sophisticated and professional look to the site.
Brown is associated with the earth, wood, and stone. It’s a completely natural color and a warm neutral. Brown can be associated with dependability and reliability, with steadfastness, and with earthiness. It can also be considered dull.
In design, brown is commonly used as a background color. It’s also seen in wood textures and sometimes in stone textures. It helps bring a feeling of warmth and wholesomeness to designs. It’s sometimes used in its darkest forms as a replacement for black, either in backgrounds or typography.
The grayish-brown here lends a sense of responsibility and dependability.
The orangish-brown here gives a very earthy and dependable feeling.
The dark brown used in the background here lends an earthy and steadfast look to the overall layout, and lets the brigher colors in the design really get to stand out.
Woodgrain is a popular use of brown, and in this case the warm brown adds some friendliness to an otherwise minimalist site.
The grayish-brown background here lends a feeling of stability and down-to-earthness.
Beige and Tan
Beige is somewhat unique in the color spectrum, as it can take on cool or warm tones depending on the colors surrounding it. It has the warmth of brown and the coolness of white, and, like brown, is sometimes seen as dull. It’s a conservative color in most instances, and is usually reserved for backgrounds. It can also symbolize piety.
Beige in design is generally used in backgrounds, and is commonly seen in backgrounds with a paper texture. It will take on the characteristics of colors around it, meaning it has little effect in itself on the final impression a design gives when used with other colors.
The light tan background here feels young and fresh because of the bright colors around it.
The light tan background here lends a more conservative and elegant feeling to the overall design.
The yellowish tan background is made even warmer by the orange and brown accents throughout this site’s design.
Tan is popularly used as a paper-bag texture, and in its more grayish form as a concrete or stone texture.
The beige header background and other accents on the site lend a refined and traditional feeling to the overall design.
Cream and Ivory
Ivory and cream are sophisticated colors, with some of the warmth of brown and a lot of the coolness of white. They’re generally quiet, and can often evoke a sense of history. Ivory is a calm color, with some of the pureness associated with white, though it’s a bit warmer.
In design, ivory can lend a sense of elegance and calm to a site. When combined with earthy colors like peach or brown, it can take on an earthy quality. It can also be used to lighten darker colors, without the stark contrast of using white.
The ivory background here has a warm quality that’s tempered by some of the cooler colors on the site.
The grayish-cream background here is made warmer by the orangish-brown accents.
The cream background adds a sense of understated elegance this site would otherwise be lacking.
The cream background here reinforces the antique theme that runs throughout the design’s graphics.
The ivory combined with other light colors and jewely tones makes this site have a very elegant overall appearance.
While the information contained here might seem just a bit overwhelming, color theory is as much about the feeling a particular shade evokes than anything else. But here’s a quick reference guide for the common meanings of the colors discussed above:
Red: Passion, Love, Anger
Orange: Energy, Happiness, Vitality
Yellow: Happiness, Hope, Deceit
Green: New Beginnings, Abundance, Nature
Blue: Calm, Responsible, Sadness
Purple: Creativity, Royalty, Wealth
Black: Mystery, Elegance, Evil
Gray: Moody, Conservative, Formality
White: Purity, Cleanliness, Virtue
Brown: Nature, Wholesomeness, Dependability
Tan or Beige: Conservative, Piety, Dull
Cream or Ivory: Calm, Elegant, Purity
If you’re going to use color effectively in your designs, you’ll need to know some color concepts and color theory terminology. A thorough working knowledge of concepts like chroma, value and saturation is key to creating your own awesome color schemes. In Part 1: The Meaning of Color of our color theory series, we covered the meanings of different colors. Here, we’ll go over the basics of what affects a given color, such as adding gray, white or black to the pure hue, and its effect on a design, with examples of course.
Hue is the most basic of color terms and basically denotes an object’s color. When we say “blue,” “green” or “red,” we’re talking about hue. The hues you use in your designs convey important messages to your website’s visitors. Read part 1 of this article for the meanings conveyed by various hues.
The primary hue of the background and some of the typography on the Happy Twitmas website is bright red.
Using a lot of pure hues together can add a fun and playful look to a design, as done in the header and elsewhere on this website.
Pure red is a very popular hue in Web design.
Mix uses a number of pure hues in its header and logo.
Green in its purer forms is seen less often and so stands out more than some other colors.
Chroma refers to the purity of a color. A hue with high chroma has no black, white or gray in it. Adding white, black or gray reduces its chroma. It’s similar to saturation but not quite the same.
Chroma can be thought of as the brightness of a color in comparison to white.
In design, avoid using hues that have a very similar chroma. Opt instead for hues with chromas that are the same or a few steps away from each other.
Cyan has a high chroma and so really stands out against black and white.
Another website with a high chroma blue, though it includes some tints and shades with somewhat lower chromas.
Combining high and low saturation in the same hue can make for a sophisticated and elegant design.
Colors with very high chroma are best used in moderation, as done here.
Differences in chroma can make for a visually pleasing gradient.
Saturation refers to how a hue appears under particular lighting conditions. Think of saturation in terms of weak vs. strong or pale vs. pure hues.
In design, colors with similar saturation levels make for more cohesive-looking designs. As with chroma, colors with similar but not identical saturations can have a jarring effect on visitors.
The saturation levels of many of the different hues used here are similar, adding a sense of unity to the overall design.
Combining colors with similar muted saturation levels creates a soft design, which is emphasized by the watercolor effects.
Hues with lower saturation levels aren’t necessarily lighter, as shown here.
An excellent example of how using a hue with a high saturation against a background with low saturation can make the former really stand out.
Aother example of how low saturation colors make nearby high saturation colors really stand out.
Value could also be called “lightness.” It refers to how light or dark a color is. Ligher colors have higher values. For example, orange has a higher value than navy blue or dark purple. Black has the lowest value of any hue, and white the highest.
When applying color values to your designs, favor colors with different values, especially ones with high chroma. High contrast values generally result in more aesthetically pleasing designs.
The high value of the yellow used here really stands out against the lower-value black and gray.
This website combines blue hues with two different values. Because the different values have enough contrast, the overall look is visually appealing.Combining colors with similar values makes for an energetic and lively background (which is enhanced by the design itself).
The red here has a lower value than the light blue, which itself has a lower value than the white.
The human eye can pick up differences in value even among such similar hues.
Tones are created when gray is added to a hue. Tones are generally duller or softer-looking than pure hues.
Tones are sometimes easier to use in designs. Tones with more gray can lend a certain vintage feel to websites. Depending on the hues, they can also add a sophisticated or elegant look.
Tones can give websites a sophisticated look while adding some vintage and antique flair.
This website combines blues in a variety of tones, shades and tints.
Tones can be intensified by adding gray around them, as done here.
The tones used in the navigation and background design here give this website a vintage, hand-made feel.
A great example of how a pure hue can really stand out against a background of tones.
Some colors that we might consider gray are actually tones of other colors. In this case, the background is a blue tone but with a lot of gray added.
A shade is created when black is added to a hue, making it darker. The word is often incorrectly used to describe tint or tone, but shade only applies to hues made darker by the addition of black.
In design, very dark shades are sometimes used instead of black and can serve as neutrals. Combining shades with tints is best to avoid too dark and heavy a look.
Jonathan Moore’s website has a variety of different shades of purple in the background (and a couple of tints in other parts).
Using different shades together works well, as long as sufficient contrast between them is maintained.
An effective combination of shades and tints, particularly in the header.
Another background design that has shades (and a few tints) in a textured gradient.
Combining shades within textures adds interest to this website.
A tint is formed when white is added to a hue, lightening it. Very light tints are sometimes called pastels, but any pure hue with white added to it is a tint.
Tints are often used to create feminine or lighter designs. Pastel tints are especially used to make designs more feminine. They also work well in vintage designs and are popular on websites targeted at parents of babies and toddlers.
Caio Cardoso’s website has a variety of green tints in the background and in other elements.
The blue tint on Fernando Silanes’s website creates a soft and sophisticated look.
Blue tints are popular for sky and nature motifs.
Tints are also popular in watercolor-based designs.
Tints combined together make for a sophisticated gradient.
While you don’t necessarily have to remember all of these technical terms, you should be familiar with the actual concepts, especially if you want to master part 3 of this series (in which we create our own color schemes). To that end, here’s a cheat sheet to jog your memory:
Hue is color (blue, green, red, etc.).
Chroma is the purity of a color (a high chroma has no added black, white or gray).
Saturation refers to how strong or weak a color is (high saturation being strong).
Value refers to how light or dark a color is (light having a high value).
Tones are created by adding gray to a color, making it duller than the original.
Shades are created by adding black to a color, making it darker than the original.
Tints are created by adding white to a color, making it lighter than the original.
In the previous two parts of this series on color theory, we talked mostly about the meanings behind colors and color terminology. While this information is important, I’m sure a lot of people were wondering when we were going to get into the nitty-gritty of actually creating some color schemes.
Well, that’s where Part 3 comes in. Here we’ll be talking about methods for creating your own color schemes, from scratch. We’ll cover the traditional color scheme patterns (monochrome, analogous, complementary, etc.) as well as how to create custom schemes that aren’t based strictly on any one pattern. By the end of this article, you’ll have the tools and skills to start creating beautiful color palettes for your own design projects. The best way to improve your skills is to practice, so why not set yourself a goal of creating a new color scheme every day.
A Quick Review
Let’s start with a quick review of what was covered in parts 1 and 2. In part 1, we talked about how all colors have inherent meanings, which can vary depending on the country or culture. These meanings have a direct impact on the way your visitors perceive your site, even if it’s just subconsciously. The colors you choose can either work for or against the brand identity you’re trying to create.
In part 2, we covered color terminology: hue (what color something is, like blue or red); chroma (how pure a color is, the lack of white, black or gray added to it); saturation (the strength or weakness of a color); value (how light or dark a color is); tone (created by adding gray to a pure hue); shade (created by adding black to a pure hue); and tint (created by adding white to a hue). These are important terms to know as we move forward and create our own color schemes.
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.
The basic, twelve-spoke color wheel is an important tool in creating color schemes.
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).
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.
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.
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.
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.
Another example of a traditional analogous scheme.
And the above theme modified for use in a website design.
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).
A wide range of tints, shades, and tones makes this a very versatile color scheme.
Another complementary color scheme with a wide range of chromas.
Don’t forget that beige and brown are really tints and shades of orange.
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.
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.
Another palette with a wide range of chromas.
Triadic schemes are made up of hues equally spaced around the 12-spoke color wheel. This is one of the more diverse color schemes.
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.
Alternately, using one very bright hue with paired muted hues makes the single bright hue stand out more.
Tetradic color schemes are probably the most difficult schemes to pull off effectively.
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 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.
It works just as well for darker color schemes.
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.
The colors here all have similar chroma and saturation levels.
Again, using colors with similar chroma and saturation is effective and creates a sense of cohesion across a color scheme.
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.
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.
For our apparel store, here’s a traditional monochromatic scheme, with white added in as a neutral.
For our design blog, we’ve gone with a color scheme made up of shades and tints of gray.
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.
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.
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.
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.
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.
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:
Here’s the original color scheme that Kuler gives us when using this image:
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:
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):
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:
And here are the five color schemes that Kuler gives us from this image:
And here’s what I came up with in Photoshop using the same image:
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:
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.
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
North East Peace III Partnership
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.
Here are some additional resources that should help you in creating your own color schemes, as well as some links with more information about traditional color schemes.
10 Super Useful Tools for Choosing the Right Color Palette
A round-up from Web Design Ledger that covers ten great tools for finding and creating color palettes.
100 Random Colors 2.0
This page will load 100 random colors, with hex codes. It’s a great place to check if you’re looking for color inspiration.
Classic Color Schemes
This article from Color Wheel Pro covers all the traditional color schemes in detail, with examples.
Another color scheming tool. Their library colors tab is particularly useful for finding and creating monochromatic color schemes.
A color scheme gallery and tool with a free online version.
A community for color and design that includes a huge gallery of color palettes, search functionality as well as tools to create your own color palettes。