You're Awesome!

Resource Center » Color Theory for Web Design

One of the most important elements of a good web site is the color scheme. The color scheme impacts more than just the usability and visibility of a web site; colors evoke certain emotions in its users. Web designers must carefully consider emotional ties along with what the colors may symbolize—for instance, in America, white is often worn at weddings, yet it is worn at funerals in Japan. Color schemes are important when it comes to business promotional items and advertising specialty products.

Color Theory

Color theory is the study of colors and how they impact the mind. Color theory addresses a number of topics surrounding color, such as additive color, subtractive color, primary colors, secondary colors, tertiary colors, tint, hue, value, and saturation.

Additive colors are red, green and blue. They are emitted directly from a light source.

Subtractive colors are those that are created because they reflect some wavelengths and absorb others. They start with white and subtract the wavelengths to create the colors.

Primary colors are those that cannot be created using other colors—something many of us learn early in our school days. These colors are red, yellow, and blue.

Secondary colors are those that can be created using a combination of the primary colors—green, orange, and purple.

Tertiary colors are those that are created from a combination of the primary and secondary colors.

Tint refers to a mix between a color and white, which increases lightness.

Shade refers to a mix between a color and black, which increases darkness.

Hue refers to the color, usually by name, for pure spectrum colors.

Value refers to the relative lightness or darkness of a color.

Saturation refers to the amount of gray in a color.


The Color Wheel

The Color Wheel is a visual representation of how colors work together. When using it as a reference, designers are able to quickly identify color schemes that will suit their designs.

CSS Drive's Image-to-Colors Palette Generator allows the user to create a color palette from an uploaded image.

Color Scheme Designer has a responsive color scheme generator that allows the user to pick different variations on the base color that is chosen. It's very helpful for creating fresh ideas!

Color Toy will create random color schemes for you. It provides the RGB and hexadecimal numbers for each color it generates, allowing you to easily use the colors.


Color Combinations

There are many different color combinations that web designers should know in order to create a unique color scheme, meet the needs of clients, and help the usability of the a site.

Monochromatic color schemes use different shades and tints of the same hue.

Complementary color schemes use hues directly opposite of each other on the color wheel.

Split Complementary color schemes use the two colors on either side of a color's complement on the color wheel.

Triad color schemes use three different colors equidistant from each other on the color wheel.

Achromatic color schemes use colors that are directly next to each other on the color wheel.


Colors on the Web

When computers were only able to display in 8-bit color, there were only 256 total colors that displayed exactly the same across PC, Mac, and all web browsers. Because 40 of these colors were reserved as system colors, only the remaining 216 were considered web-safe colors. This was the palette that web designers were allowed to use; many designers still adhere to it. Due to the advent of advanced technology, web designers are no longer limited by this palette and are now able to use up to 16 million different colors that most recent monitors can display.

A designer's color choices are displayed using the hexadecimal system. The hexadecimal system is based on a number system of 16 rather than the decimal system of 10. Each color has a value based on this system so that web designers can better identify the colors they need.

It is crucial for a web designer to understand color theory and its aspects in order to create aesthetically-pleasing and user-friendly website designs. Without a strong sense of color theory, potential customers could overlook your company's website in favor of a competitor's website!

Article By Bubba

Bubba is the Quality Logo Products mascot. He may have started out as "just a stress ball," but he's come a long way since the company's launch in 2003. Bubba has been immortalized in numerous vector artwork designs for internal and external promotions, and you can see him change outfits on the Quality Logo Products homepage whenever a holiday rolls around. Oh, and he thinks pants are for the birds. You can connect with Bubba on Google+.

Share on FacebookShare on Twitter

Printing 101

Tips and Tutorials for Photoshop
Color Scheme Tools
Free Clipart and Web Graphics
Free Fonts
Photoshop and Graphic Design Resources
TIFF Images: An Informational Guide
Color Theory for Web Design


Quality Logo Products Logo

Quality Logo Products, Inc. is your number one source for stress balls and promotional items.

Quality Logo Products, Inc. · 724 North Highland Avenue · Aurora, Illinois 60506
For assistance, email us at or call 866-312-5646 · Monday - Saturday.

Copyright 2003 - 2016 Quality Logo Products, Inc., Registration No. TX7-524-201. All Rights Reserved.

Do you need help? Close Yes, I'd like help
Quality Logo Products, Inc. Need Help? Call 866-312-LOGO (5646)