Color selection is a very subjective matter. What evokes a positive reaction in an individual may evoke a negative reaction in others. Often, it is influenced by personal preferences or cultural concepts. Color theory can be considered as a science in itself. By observing how colors may affect different individual or group, we can derive principles that can be implemented in many fields, such as marketing or website design. Something as trivial as adjusting the saturation or hue of a color may trigger a very different feeling. On the other hand, difference in cultural concepts may make a color uplifting and happy in a community but can be depressing or negative in another.
Just like in common marketing approaches, color selection should largely depend on your target market. For example, if you aim for a local market, look for favorable color in that society and if you aim for the global market, you may have more relaxed options. However, some experts in web designers argue that, Internet users are generally more flexible and/or more educated, which make them better tolerate color taboos.
These are three common categories of color:
They include red, yellow, orange and any variation of these. These are the colors of sunset, sunrise, autumn leaves and fire, often used to create an energizing environment. Yellow and red are primary colors and orange falls in the middle. Use them if you want to create a positive, enthusiastic, fun and passionate website. Because, they are warm in tone, you shouldn’t combine them with cool colors.
Red: It is a hot color and although can be used to create a vibrant website, it is also can be associated with warfare and violence. However, with proper adjustments, you can successfully make a website that is associated with passion and love. For centuries, it has been associated both for the cupid and devil. According to a research, red can increase human metabolism, blood pressure and respiration rate. Although red is closely related with anger, you may use it on website that is related to high status, just think of the red carpet on any celebrity event and award show. If your site has a webpage that gives a warning, you can use red more (which is the reason why most warning labels and restrictive traffic signs are red).
In some societies, such as China red has different connotation, as it is used to symbolize good luck, happiness and prosperity. Red is also predominantly used as wedding theme. Due to the popularity of AIDS awareness campaign, the Red Campaign, in Africa, red is associated with the disease. In countries at southern Africa, though, red is used as the mourning color.
Because red is a potentially powerful color, it may have an overwhelming effect in your site design, especially if used in its purest form. You can use it to convey passion or power. Red is a versatile color, the brighter shades of red should be used on energetic sites, while sites that want to evoke elegance and power should use darker shades.
Orange: It is an energetic and vibrant color and in its muted forms are often used to symbolize autumn and Earth in web design. Because of its close association with changing seasons, you can use orange to represent movements and changes. The vibrant variant of orange can be used on sites that are associated with vitality and design, because orange is also a refreshing and nutritious fruit. Orange can command attention without being too overpowering like red. It is less “in your face” and considered to be more inviting and friendly.
Yellow: It is the most energizing and brightest of the warm colors. Although yellow is sometimes associated with cowardice and deceit in Western society, you can use it to represent sunshine and happiness in web design. Hope can be associated with yellow and yellow ribbons are often worn by families whom loved ones are at war. Although not as powerful as red, yellow is also associated with danger. In certain countries, yellow has different connotations: In India, it’s the color for merchants, in Japan it represents courage and in Egypt, it is used for mourning.
With bright yellow, you can have a website that is brimmed with cheerfulness and happiness. Other than pink or blue, you can use softer yellows for baby-related sites, due to its gender-neutral characteristic. If you prefer to have calmer influences to the happiness, you should use light yellows in your site. Gold-hued and darker yellows can convey high value or antiqueness and it should be used in a web site that prioritizes on the sense of permanence.
They include green, blue and purple, which can be subdued easily by website elements that use warm colors. Cool colors are related to the nature, water and nighttime, with the relaxing, calming and somewhat reserved feelings. In this category, blue is the only primary color and it means we can create other cool colors by combining blue with other warm colors, such as yellow (to make green) and red (to make purple). Green has some attributes of yellow, while purple has some attributes of red. If you want to have a sense of professionalism and an overall calm in your website, you should use cool colors.
Green: It is a down-to-earth color and can properly represent growth and new beginnings. It also signifies abundance and renewal. You should be careful however, as green is sometimes associated with a lack of experience, jealousy and envy, consequently, you should use words and other website elements that can negate these negative characteristics. Just like its parent color, blue, green also has the same calming attribute, while offering the energy bursts of yellow, although perhaps not as intense. If you want to have a sense of stability and balance, green is a good color to choose, due to its association with the cycle of nature. Olive green should be used on websites that represent the natural world, while brighter greens should be used on more vibrant and energizing websites. Dark greens represent affluence and a high degree of stability and wealth.
Blue: In the western society, blue is usually associated with sadness, but you can use it to represent responsibility and calmness. Light blues are friendly and refreshing. Dark blues are more reliable and stronger. Blue is also associated with peacefulness and has religious and spiritual connotations in many traditions and cultures. You can change the significance of blue changing its hue and shade. Your shade of blue may bring a significant perceived impact on your website. For example, many companies use dark blue in web design to show, strength and reliability, while bright blues is used for sites with refreshing and energizing auras.
Purple: It is often associated with royalty, and has some attributes of blue and red. If your company places a priority in imagination and creativity, you should use purple for your website. Lavender-like color or light purple is used by many sites with romantic or spring theme. If you sell luxury products online, dark purple is a good color to use.
In web design, these colors are often used as backdrops and often combined with colors that have brighter accents. However, many sites successfully use neutral colors on their own and sophisticated site layout can be used only with neutral colors.
Black: It is the most powerful of neutral colors and it can be associated with formality, elegance and power. However on the negative side, black is related with mystery, death and evil, for example, many websites with supernatural themes, use black predominantly in web design. Black is associated with occult and a traditional color of mourning in Western society. It can be used in many design styles; elegant or edgy, modern or conservative, unconventional or traditional, depending what other colors you want to combine. Because of its neutrality, you should use black for typography on web sites. Black strongly conveys both a sense of mystery and sophistication, use it carefully.
White: Like black, it’s at the very end of the color spectrum and can work well with all other colors. If your website’s goal is to deliver virtue, cleanliness and purity, you should use white. You can use white, if your website’s main topic is wedding, because the color is usually worn by brides. This color is also used by health-related websites and can be used in the official website for hospital or clinic. Because angels are usually depicted in white dress and bright white light, the color is often associated with goodness. White can be used perfectly as the backdrop for many more vibrant colors. It conveys simplicity and cleanliness; you should use white, if your site has a minimalist design. White is closely related with low temperature and ice, so you should use it if you are selling products related to winter.
Gray: It is another neutral color and can be considered among the cooler color in this category. You can replace white with light grays in some sites or black with dark grays. However, because gray is considered as depressing and moody, you should use it carefully. Gray is generally formal and conservative, but with some adjustments, you can make your website looks modern with gray. In many corporate web designs, where professionalism and formality are needed, you should use gray as a dominant color. Although, grays are actually shades of black, you can add brown or blue hues in it. In web design, gray background is commonly used.
Brown: It is associated with stone, wood and Earth. Brown is a warm neutral and a completely natural color. If you want to convey positive values such as reliability, dependability, earthiness and steadfastness, brown is a good color to use. However, when used improperly, you can make your website looks dull. Brown is also commonly used as a background color; in the 1990’s, wood textures were often used for certain website elements, such as for navigations. You can get a sense of wholesomeness and warmth in a web design, by using brown. Dark brown can be used in some sites as a warmer replacement for black.
Beige and tan: Beige is a unique neutral color, as it can have either warm or cool tones depending on the presence of other colors. It has the coolness of white and the warmth of brown, however, like brown, when used improperly, you can end up with a dull website. Due to its conservativeness and paper-like color, beige is often used for backgrounds in many sites. Beige can evoke the feeling of piety and may be used well on religious sites. It can absorb the characters of other colors around it, so you should be careful when combining beige with other colors.
Cream and ivory: These both are sophisticated colors and can give the coolness of white or the warmth of brown. They often evoke the sense of antiqueness and history quietly. Cream is both warm and cool, depending on how you use it. If you want to have a sense elegance in your web site, you should use cream or ivory. If you want some earthy qualities, combine it with brown or peach. If you want to avoid the start contrast of white and lighten darker colors, cream should be your choice.
Here is a quick reference of colors that can be used on your website.
- Red: Passion, Anger, Love
- Orange: Energy, Vitality, Happiness
- Yellow: Happiness, Deceit, Hope
- Green: New Beginnings, Nature, Abundance
- Blue: Calmness, Sadness, Responsibility
- Purple: Creativity, Wealthy, Royalty
- Black: Mystery, Evil, Elegance
- Gray: Moody, Formal, Conservative
- White: Purity, Virtue. Cleanliness
- Brown: Natural, Dependable, Wholesome
- Tan or Beige: Pious, Conservative, Dull
- Cream or Ivory: Elegant, Calm, Pure
Color schemes for websites
You can use a number of color schemes in websites, which can make decision on color combination far easier to do. These are typical color schemes:
- Monochromatic: They are made up of different shades, tones tints. Monochromatic is the simplest color scheme and because you use colors with the same hue, it is very unlikely that you’ll come up with an ugly or jarring scheme.
- Analogous: It is slightly more difficult to create. You can add interest by using colors with the same tints, shades and tones although these colors have similar chroma level.
- Complementary: This scheme uses two colors that are completely opposites with the same chroma, however, when used improperly, your site design can be jarring. To avoid undesired effects, you should leave white spaces or a transitional color between these colors.
- Split complementary: It is similar to a typical complementary scheme, except that the colors have opposite hues, instead of chroma.
How to create a color scheme?
Most web designers would agree that creating a perfect color scheme is sometimes intimidating, although it’s not too complicated. There are a few tricks that can help you create wonderful palettes right off the bat. After practicing with basic color schemes, you can use certain tools available online to create a color scheme that you can use in your site, but most of the time Photoshop can help you adequately. After you’re familiar with basic schemes, you should break away from them and create a few custom schemes. While understanding how basic schemes are created and how colors interact are important, in reality, many web designers use custom schemes that don’t conform strictly to basic, predefined patterns.
At first, you may start with a simple monochromatic scheme, to try to get a feel for better scheme. While basic color schemes are very rarely used in modern websites, monochromatic schemes are the exception. Most web designers use monochromatic schemes quite often.
In many cases, it is important to use shades, tones and tints in your color schemes. Pure hues have similar saturation levels and value, which lead to schemes that are boring and overwhelming at the same time. By mixing in shades, tones and tints you can create an infinite number of colors. A common way to create professional looking color scheme in website deign is to avoid the pure hue of a given color and take a few shades, tones and tints; as an accent color add a more hue that is about three spaces away in the color wheel. This can give your design visual interest, while retaining an adequate balance.
Neutrals should be used properly in a website design. Black, white, gray, tan, brown and off-white are widely used neutrals in web design. Tans, browns and off-white can make your color scheme warmer, because these colors are variations of yellow and orange. Gray works well on the surrounding colors, both with warm or cool feel. Black and white can also look either cool or warm depending on the “temperature” of your site.
Black and white are easy to add on your color schemes. However, if the scheme looks a little bland, you should consider using very dark or very light shade of gray. Adding off-white, tans and browns hues can be tricky, but with enough experience, you should be able to do it easily. You may also use very dark chocolate brown to replace black in your design. On the other hand you can replace light gray or white with pale off-white.
Many web designers would agree that you can make a striking color scheme easily simply by adding a single bright accent color to a neutral colors palette. If you’re unsure, but want to have the most foolproof result, try to stick with the gray end of the color. In general, pure grays and cool grays are appropriate for many modern designs. For more traditional web designs, you may need to use browns and warmer grays.
One of the critical decisions in color management is to decide how many colors you should choose. In many cases, using five colors are adequate, as it already gives enough options for implementing most web design methods. If you feel confident, you can use fewer colors in your scheme. Many professional-looking websites use only three colors, some even only two. Although it’s perfectly fine to use eight or ten colors in your scheme, they may unnecessarily complicate your work and when used improperly can be visually disturbing. Use as few colors as you need and make continuous experiments. However, start with a color palette that contains five colors, and adjust the number as you progress. When adding a color to your palette, you should start with a traditional color and adjust the hue, tone and tint as you see fit. This method will give you a sense of direction.
This article only touches on the basic color theory and its implementation in web design. Web design grandmasters have literally spent many years refining the color usage to better match the situation. Practice is essential when you want to create wonderful sites with appropriate color schemes. To hone your skill, you should create a custom scheme each day. You may need to start with an automatic tool first and then with Photoshop. If you encounter a website with particularly striking or beautiful colors, try to create a scheme that corresponds to those colors. Organize your schemes and store them for later references. The library will be a good investment for your later projects.