Whether we consciously think about it or not, color is information. Text, images, and animations all fall into the category of "content" when found in online environments - but what about color?

color theory

Just as with print designs, such as those for booklet printing or business cards, web designs use color to create hierarchy, draw the eye, and add texture. However, knowing a bit of color theory will help you to more powerfully incorporate color into online projects. Below, the brief overview of online color theory should give you some new knowledge to apply when choosing colors in web design.

Basics: Color Wheel Theory

As a designer, it is necessary to be familiar with at least the basic attributes of visible light - or color. There is quite of bit of information in this realm of art. There are even college courses dedicated to the study of color and its features. For now, however, let's focus on hue (or specific color distinguishable from another color).

The color wheel is most often broken up into 12 colors. There are 3 primary colors: Red, Yellow, Blue; 3 secondary colors: Yellow, Purple, Green; and 3 tertiary colors which are the 6 colors that fall between the primary and secondary colors. This organization helps us understand the physical arrangement of colored light so that we can decipher color harmonies.

types of harmony

Harmonies and Trends

Color harmonies are the basic element in creating color themes. Popular color themes come and go because they are considered trendy. For example, in the 50's, the American culture color-trend was bright, mainly primary colors: Yellow, Blue, Red. But in the 60's, the color-trend subdued itself into earthy and pastel like colors. Then, in the 70s & 80s, bright neons became prevalent. You get the idea. Today, though, since we have the capability of creating so many colors through digital formats, it's harder to determine themes. This is beneficial to us because it allows the creative freedom we need to design unique themes using harmonies.

Color harmonies are created several different ways, but there are 3 main "rules" in selecting these harmonies:

Complementary colors

Complementary Color Wheel Example

Complimentary colors fall opposite to each other on the color wheel, such as Red and Green. This is probably the most common way to start a color theme. The name "complementary" is derived from the fact that these colors don't relate to each other in any physical way, and thus naturally amplify each other. Many designers may use a base color, then apply the complement as the accent to really bring out the base.

Analogous colors

Analogous Color Wheel Example

These are colors that lie next to each other on the color wheel, like Yellow, Yellow-Green, and Green. They feel visually related because, well, they are! Harmonies that contain analogous colors tend to be less obtrusive and less of a contrast due to their likeness to each other.

Triadic colors

Triadic Color Wheel Example

Most often, 3 main colors are chosen for a color scheme (online, this tends to be black or grey, white, and a miscellaneous color). However, when these 3 colors are evenly spaced around the color wheel, they are considered "Triadic." Opposite from analogous color harmonies, these harmonies tend to be quite high contrast and usually stand out among the other rules. The simple reason is because these harmonies contain colors which are least related to each other on the wheel. But this does not mean that they don't look good together. Many themes that use triadic colors favor one or two of the colors as a base, then utilize the other color(s) as the accent(s).

RGB vs. Other Color Modes

While you probably already know about RGB color vs. CMYK and Pantone, it is important enough to briefly mention. Bottom line: RGB gives brighter, more vivid colors for display on monitors. CMYK and Pantone are best for printed materials.

Additive vs. Subtractive Colors

The reason why RGB colors work best on screens is because they are additive colors. They are based on the emission of light, such as what televisions and computer monitors do. With the additive color mode, the more colors you combine, the whiter the light becomes. Therefore, black in RGB is literally no color at all. White, on the other hand, is created with the maximum number of colors combined.

CMYK colors are based on the subtractive color model. Printers mix different amounts of CMYK (Cyan, Magenta, Yellow, and Key or Black) together to create individual shades of color. The more color that is added, the darker or more black the hue becomes. Pantone colors are a specific list of colors that a company, Pantone, created for print materials. You will only see the true version of Pantone colors if you view them in an official Pantone color book.

Color Conversion

The problem that some designers run into is when they have to use a logo on a website and the colors used in the design are CMYK or Pantone. Yes, you can use the logo with the CMYK or Pantone color scheme, but it would look much brigher if uploaded to the web in RGB. This is why most companies pre-convert their brand colors. If your client gives you a brand guideline complete with the actual color numbers you need to use, then great! If not, try a color conversion tool online, such as this one from web.forret.com or this Pantone-CMYK-RGB conversion chart from Crigital Media.

Application Tips

Using the rules listed above, you should feel better prepared when selecting colors for the web. However, there are still lots of colors from which to choose when creating a website. Here are just a few more tips to help you even further in your color scheme creations:

  • Use online resources: Adobe Kuler and Color Explorer offer tools to help designers create color schemes that fall within the color harmony rules.
  • Select from the right color mode: Even Photoshop's Color Picker tool has built-in features to assist those eager to make the best color choices for web design. Not only can you choose RGB colors, but you can also select from colors that the majority of monitors can display. Just check the "Only Web Colors" box in the Color Picker dialog window.

Adobe's Photoshop has a built in "Web Safe" colors option in the color selector screen

  • Embelish, don't Distract: Remember that text should be always be readable. Color should never distract the viewer unless it is meant to direct their attention to a certain object.
  • Use White Space: Even if the "white space" isn't white, allow the eyes a place to rest. Bright colors and multiple colors in one place tend to be irritating in vast amounts.
  • Check The Wheel: When you're curious why 2 or 3 colors do (or don't) look good together, check an RGB color wheel. Become acquainted with switching colors and get comfortable evaluating the relationship between various color combinations.

Once you're familiar with the color wheel, you should be on your way to flawlessly integrating color into your designs. Don't forget, when you create a color scheme that you absolutely love, save it so that you can use it for future projects!

About the author

Alex Roman

I'm a 26-year old independent graphic artist and architect based in Bucharest. I really love what i do!

Follow me on Facebook.

Post a comment

Comments

  • Slim Marley
    2012-03-25 15:33:15
    Good Article. It helped me quite a bit. I also find that Kuler, by Adobe, is a very good colour scheme tool.
  • Berlacher
    2012-03-25 15:33:37
    It’s a great help! Thank you very much!
  • Mark Carter
    2012-03-25 15:34:03
    great tips, love it very useful information.
  • Keryn
    2012-03-25 15:34:31
    Nice articles, trying to get the best color for my blog
  • Nancy Rod
    2012-03-25 15:35:09
    Picking the right colors is so important and should not be taken lightly in web design. I am having my first boy after two girls and I am experiencing in life what I already knew on the web. People’s emotions are strongly tied to color pallets.
  • Mike
    2012-03-25 15:35:26
    Color solution truly are the basis of attractive web pages! Learned a lot smarter thanks!
  • Jessica
    2012-03-25 15:35:48
    Im a Color Lover. These resourses helps me to boost my skills on color themes. Thanks a lot.
  • Fererra D.
    2012-03-25 15:36:06
    Nice color resources. Thanks for this great links really useful for me to improve the color knowledge.
  • Andrew
    2012-03-25 15:36:31
    Good post. Web site color combinations decides your returning visitors !
  • Darrell
    2012-03-25 15:36:58
    A great deal of your theme’s success will depend on the color choices you make.
  • Katie
    2012-03-25 15:37:54
    Thanks to this post! Really interesting and helpful as well. Keep posting!
  • 2012-03-30 08:43:35
    Your Tutorial is nice.Colors combination is more attractive to web designs,graphics,logos.Depend on colors the design will look good.
  • 2012-04-07 09:16:57
    So many colours. You got me confused now!
  • 2012-06-05 04:52:30
    Nice article, thanx for sharing with us
  • Set Your Sites
    2012-06-23 13:08:19
    Well explaned and nicely written. This is helpful in more than just webdesign! Thanks
  • 2012-06-26 07:46:18
    Some excellent web design tips there for colour usage.
  • Cheri
    2012-07-15 00:26:29
    Really good information, getting the colors to look good in all mediums can get a little tricky sometimes. Great tips!
  • 2014-03-04 01:27:08
    Really awesome information there. Thank you!
  • 2015-03-17 16:30:33
    […] The general rule of thumb, according to Creative Bloq, is to set print work as CMYK at 300dpi. On the other hand, if you are developing work for the web, use RGB instead. When determining the resolution, you should always focus on your client’s specific needs visually. Focus on color profiles and fonts before saving and printing your projects. […]
  • 2015-03-26 19:24:56
    i would like to learn from you
  • 2015-06-16 11:19:33
    […] Not all websites should look the same. There are different styles, for different services. For example, a blogging website on cats will look different to a Christian church website. The themes of the two sites will be completely different, as will the layouts. If your website is for something fun and lighthearted, you don’t want it to look all formal and business like. On the other hand, if your website is strictly for business, you won’t want a casual design with bright colours, etc. For tips on using colour in your web design, click here. If you really interested in some really good color theory tips in web design, take a look a our article. […]