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 and which colors would look pleasing together.
There are many tools on the internet that designers can use to create color schemes. One of the best is the Color Scheme Designer that features a clickable, interactive color wheel. Depending on what kind of scheme you want, you can adjust the settings and click a color.
If you have a certain image or logo that you want to work from, you can use a color palette generator to pull out the different colors and see what's in the palette. Then you can use colors that already complement each other.
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. If you happen to know a color that you already like, you can input the hexadecimal number and generate a palette for you.
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!
Printing 101
Tips and Tutorials for Photoshop
Clipart for Teachers
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
