BASICS OF COLOR THEORY

Creation & Innovation

Moderator: Moderators

BASICS OF COLOR THEORY

Postby sreejesh » Wed Sep 16, 2009 2:28 am

BASICS OF COLOR THEORY

Color theory is a set of principles used in order to create harmonious color combinations. With the use of color theory, you can combine colors together perfectly every time. Color representations can be visually represented by the color wheel, as seen below. If you follow the principles of the Color Theory, then the following colors are harmonious:

(1) 2 Colors Opposite of Each other on the Color Wheel are harmonious.

(2) Any 3 Colors Equally Spaced Around the Color Wheel Forming a Triangle are harmonious.

(3) Any 4 Colors Forming a Rectangle, Each Opposite of Each other on the Color Wheel are harmonious.



COLOR SCHEMES USING THE COLOR WHEEL THEORY

PRIMARY COLORS
Primary colors are red, blue, and yellow. These 3 pigments are colors that can not be mixed or created by any combinations of other colors. All other colors are derived from these 3 colors.

Image


SECONDARY COLORS
Secondary colors are green, orange, and purple. These 3 pigments are created by combining the 3 primary colors together.

Image


TERTIARY COLOR SCHEME
The Tertiary colors are Yellow-orange, red-orange, red-purple, blue-purple, blue-green and yellow-green. Tertiary colors are colors that are created by mixing a unequal amounts of two primary color with a secondary color.literally third colour, colors that are created by mixing unequal amounts of two primary colours. An example of this would be to mix two parts of yellow and one part of blue together to form the tertiary color of yellowish green.

Image


MONOCHROMATIC COLOR SCHEME
A monochromatic color scheme uses various darker shades, grayer tones, variations of lightness and saturation, as well as paler tints of a single color. In addition, the one color is often paired with white or another neutral. This color scheme is very elegant and has a very clean effect. A good example of Monochromatic color schemes are paint swatch cards. If you look at the color wheel below, you will see that the middle band is the natural hue and as you go out towards the edges, the bands get lighter (more tinted), and as you go towards the center of the cirle the bands get darker (more shaded).

Image


ANALOGOUS COLOR SCHEME
The analogous color scheme uses 3 colors which are side-by-side on the 12 part color wheel. The middle color is considered the ruling color. So for example, in a green, blue, purple color scheme, blue would be the ruling color. One color, the ruling color, is used as the dominant color while the other two colors are used to enrich the scheme. A few examples of analogous colors are:

-- green, yellow-green, and yellow

-- aqua, blue, and indigo

-- purple, violet, and red.


COMPLEMENTARY COLOR SCHEME
Complementary colors are two colors that are opposite each other on the color wheel, such as purple-yellow and red-green. When you mix too complementary colors you produce a greyish color. If you put two complementary colors side-by-side, the complementary colors intensify each other. This scheme works best in situations where you need high-contrast compositions. You see complementary color schemes in nature all of the time, such as red flowers with green leaves, peppers, exotic fish, birds, snakes, and many more.

Image


SPLIT COMPLEMENTARY COLOR SCHEME
The split complementary scheme is a variation of the standard complementary scheme. It uses a color and the two colors adjacent to its complementary. This provides high contrast without the strong tension of the complementary scheme.

Image


TRIADIC COLOR SCHEMES
A Triadic color scheme uses colors that are found by choosing three colors that are each separated by 120 degrees on the color wheel. The primary (red, blue, and yellow) and secondary (purple, orange, green) colors are examples of triadic colors.

Image


COLOR TERMS THAT YOU NEED TO KNOW & UTILIZE
Every color available to us without any varition are called natural hues. Each of these natural hues can have a variation in tint, shade, or tone. The way that these variations come about are by combining natural hues with black, white, and all the grays in between. Even though many of you probably use the following terms on a regular basis, some of you might not know exactly what they mean or how they can help you in your website design.

HUE:
A hue is a pure color with no black or white added. A hue is the feature of a color that allows it to be identified as the color that it is, for example red, blue, yellow, green, purple, etc.

PURE HUE (NATURAL HUE):
A pure hue is the base color at its full intensity level, in other words, no shading, tinting, or tones have been added to the color yet.

SHADES:
Shades are the relative darkness of a color. You create a shade of a color by darkening the pure hue with black.

TINTS:
Tints are the relative lightness of a color. You create a tint of a color by lightening the pure hue with white.

INTENSITY (Also Known as SATURATION or CHROMATICITY)
Intensity describes the identifiable hue component of a color. A blue with RGB numbers Red - 0, Green - 255, and Blue - 0 (0,255,0) is considered 100% saturated and is intense, high in chromaticity, and completely saturated. A gray color has no hue and is considered achromatic with 0% saturation.

Image


In the picture above, the colors are at 100% saturation at the circle's edges and get less intense (saturated) as the colors get closer to the center of the circle.

TONE:
A tone is a hue that has had grey added to it. A tone can also be a hue with a large percentage of its complementary color added.

Image


VALUE / LUMINANCE:
Basically, value is a a measurement of how close to black or white a given color is. In other words, value is a measurement of how much light is being reflected from a hue. Those hues with a high content of white have a higher luminance or value. If you look at the color wheel below, you will see that this whell is full of different color values. The outer band is the natural hue meaning that it is the original color. The 2nd band is a tint of the original hue and has a higher content of white or luminance than the original hue. The inner bands are shaded versions of the natural hue and are closer to black than the original hue.

Image
sreejesh
 

Re: BASICS OF COLOR THEORY

Postby latha » Wed Sep 16, 2009 2:41 am

Sreejesh, well explained and very detailed. How do you go about choosing colors for a website when the client has no particular color in mind?

Are there a few schemes you choose for a niche? For example, warm colors for Financial Services, Cool colors for sites for Kids?
latha
 

Re: BASICS OF COLOR THEORY

Postby chrisstolz » Wed Sep 16, 2009 7:57 am

What a fantastic post!
chrisstolz
 


Return to Web Design

Who is online

Users browsing this forum: No registered users and 1 guest

cron