Search the Community

In the visual arts, color theory or colour theory is a body of practical guidance to color mixing and the visual effects of a specific color combination. There are also definitions (or categories) of colors based on the color wheel: primary color, secondary color[1] and tertiary color. Although color theory principles first appeared in the writings of Leone Battista Alberti (c.1435) and the notebooks of Leonardo da Vinci (c.1490), a tradition of "colory theory" began in the 18th century, initially within a partisan controversy over Isaac Newton's theory of color (Opticks, 1704) and the nature of primary colors. From there it developed as an independent artistic tradition with only superficial reference to colorimetry and vision science. How many colors? It is hard to give an exact answer to this question, but in general one can say that the risk of using too many colors is greater than the risk of using too few. Too many colors will make the page feel too busy and it usually makes it harder for the viewer to find the information he or she wants. It is also more tiring to the eyes. A page with too few colors, on the other hand, risks being seen as a bit boring, but this need not always be the case. One commonly used rule in these matters is to use three colors. Primary color: This is the main color of the page. It will occupy most of the area and set the tone for the design as a whole. Secondary color: This is the second color on the page, and it is usually there to "back up" the primary color. It is usually a color that is pretty close to the primary color. Highlight color: This is a color that is used to emphasize certain parts of the page. It is usually a color which constrasts more with the primary and secondary colors, and as such, it should be used with moderation. It is common to use a complimentary or split-complimentary color for this (see below). Color Wheel By now you should recognize the color wheel. If not, please read the section about Color Theory. As mentioned there, the color wheel is very useful when you want to combine colors in a way that is pleasing. Below I will demonstrate some of the most common ways to combine the colors in the color wheel. Analog Colors The analog colors are those colors which lie on either side of any given color. Often these are color schemes found in nature. A site that makes use of analogous colors usually feels harmonious. The secondary color, as described above, can often be an analogous color. Complementary Colors The complementary colors are the colors which are directly opposite from one another on the color wheel. Complementary colors are contrasting and stand out against each other. Often it is a good idea to use a complementary color as the highlight color, as described above. Split Complementary Colors Split complementary is a color and the analogous colors to its complement color. Using split complementary colors can give you a design with a high degree of contrast, yet still not as extreme as a real complementary color. It also results in greater harmony than the use of the direct complementary. Triad Colors Triad colors are three hues equidistant on the color wheel. When you want a design that is colorful and yet balanced, a triad color scheme might be the way to go. Keep in mind that the combinations above only illustrates the hues that are combined. In most color schemes you will also introduce variations on saturation, tint and shade. Other color combinations Besides the color combinations described above, which are based on the position of the colors on the color wheel, there are also a few other ways of combining colors. Monotone Chromatic A monotone color scheme is just one single hue and its variations in terms of tints, shades and saturation. Using saturation and tint/shade variations of a color is always good. However, in most cases I would advise against using a fully monochromatic scheme, as there is a risk of monotony. Using it with pure white or black can be efficient, though. Monotone Achromatic A monotone achromatic color scheme is a special instance of the monotone scheme which consists of only neutral colors ranging from black to white. A scheme like this can be efficient, but it can very easily look boring. Using an achromatic scheme with just one bright color for highlight can be very effective. The Color Wheel A color wheel is really just the spectrum twisted around so that the violet and red ends are joined. The color wheel is particularly useful for showing how the colors relate to each other and how you can create new colors by mixing two or more colors. The color wheel really consist of a continual gradient of the colors in the spectrum, but to make things a little easier I will divide the wheel into twelve distinct colors. Primary Colors Among the colors in the color wheel, there are three colors which are referred to as the primary colors. All other colors can be created by mixing these three colors. The primary colors are, as seen in the figure to the left, red, green and blue. Why red, Green and Blue? This might require a bit more explanation - There really is nothing intrinsically primary about red, green and blue, rather they are just points on thecolor wheel. In fact, in the print industry the primary colors are considered cyan, magenta and yellow. (commonly referred to as cmyk, where k stands for black). Additive Color System If you look very closely at your computer screen or TV (any color source that emits the light itself) you will see that it is built up of tiny red, green and blue dots. This color system is commonly referred to as the Additive Color System. In the additive system, you get white when the three primary colors are present at 100%, as seen in the illustration to the right. Subtractive Color System As I said above, the primary colors in printing is considered cyan, magenta and yellow. This is also called the subtractive color system. The subtractive colour system is what comes to play when the color does not emit any light of its own, but reflects light from its surroundings. In the subtractive colour system, you get black when all colours are mixed. Since on the web we are dealing only with colors on the screen, we will use the terminology from the additive color system. And since the relative position of the colors to each other is the same wheter you use the additive or subtractive system, the theory and color combinations will work out the same in either case. Secondary Colors The secondary colors are what you get when you mix any two adjacent primary colors. Red and green give yellow, red and blue give you magenta and a mix of green and blue result in a cyan color. The secondary colors are also the primary colors in the subtractive color system. Tertiary Colors To complete the color wheel we need to add the tertiary colors. The tertiary colors are those which lie in between the primary and secondary colors. As you can see on the color wheel, they are a further blending of adjacent colors. The complete wheel Adding it all together, we get the complete color wheel. The color wheel is the foundation for much of color theory, and memorizing the basic layout of it can help you in trying to pick out pleasing color combinations. Simply put, contrast is the difference between two colors. On a web page, the amount of contrast required varies with different parts of the page. You usually want a high contrast between text and its background color. But too high contrast between design elements might give an unsettled and messy impression. Black and white create the highest contrast possible. Please visit our Color Contrast Analyzer page to see if the colors you want to use have enough contrast. Colors can contrast in hue, value and saturation, but there are many different types of contrasts that have been defined by color theorists throughout the years. Some of them are perhaps not directly applicable to web design, but let's look at a few of the most important. Contrast of Hue High Contrast Low Contrast Contrast of hue is what relates most directly to the color wheel combinations described above. The further away from each other two colors are, the higher the contrast. This means that the complementary color combination has the highest contrast, while the analogous combination has the lowest. For text, a contrast of hue alone is usually not enough to make the text as legible as wanted. In that case, you might want to combine contrast of hue with some other form of contrast. A special case of contrast of hue is contrast of warm and cold colors. The way the human eye works, cold colors appear to be more distant, while warmer colors appear to be closer. This means that it is a good idea to use a warm color for a symbol or menu, and to use the cold colors for backgrounds. Contrast of Tint and Shade High Contrast Low Contrast Contrast of value is very efficient in creating large contrasts. The biggest contrast of them all-- black and white-- can be said to be a contrast of value. In general, large differences in lightness are considered to be pleasant for the eye, but low contrasts of value can also be useful for more subtle differences-- for instance, in a background. Contrast of Saturation High Contrast Low Contrast Contrast of saturation is often best for design aspects that do not require a lot of emphasis. A set of colors with different saturation set against a grey background can be interpreted as transparency. This is something that can be used to interesting effect. Combination of Contrasts Not Good This is some text Better This is some text Good for background Bad for Text This is some text Against natural values With natural values While the contrasts above can be efficiently used one at the time, is is most common to use a combination of them-- especially for text where you need a high contrast. The top picture to the left shows blue and its split complementary color, orange. This is a combination that has a high contrast of hue. This gives a rather vibrant combination that can be tiring to the eyes. By changing the value and saturation as in the next picture you will get a combination which is much more pleasing to the eye, and more readable. Working against the natural values of the colors can often have bad effects. For instance, yellow is naturally a lighter color than its complement, blue. A combination in which yellow is darker than blue would feel strange. Colors and Text Green on red is hard to read And so is red on blue Black on white is easy to read And so is yellow on dark blue As mentioned above, using the right contrast is especially important for text. Using the wrong colors can decrease the readability drastically, and it will quickly tire the reader's eyes. Black text on a white background has the highest readability. Black and yellow is another combination which usually has a high readability, as do blue and white. Green text on red and red text on green are particularly hard for many people to read. A combination of red and blue creates a vibrating effect that can also make reading very difficult. Color Blindness Another thing that can be good to keep in mind when making color selections is color blindness. Some 8% of the population has some form of color blindness, and by choosing the wrong colors, you can make your page virtually unreadable for them. There are some colors which are worse than others-- for instance, red and green. Blues and yellows are usually better to use for this reason, and you should make sure that there is a strong contrast between a text and its background. Also, make your design so that color is not the only visual cue. Triad A triadic color scheme uses colors that are evenly spaced around the color wheel. Triadic color harmonies tend to be quite vibrant, even if you use pale or unsaturated versions of your hues. To use a triadic harmony successfully, the colors should be carefully balanced - let one color dominate and use the two others for accent. http://www.tigercolor.com/color-lab/color-theory/color-theory-intro.htm What is Color? Let's take a little physics revision. Don't worry, I'll make it as simple as possible! Some objects are able to emit radiation, what that means is they throw a bunch of particles (or waves) in various directions. Light is a kind of radiation, and every light source emits photons. Photons are waves combined of various wavelengths (here x, y, x). We're going to call the way the photons fly between the light source and a particular direction a ray. Those were a couple of facts. But what happens when a human factor comes in? There's a lot of radiation everywhere around us, but our eyes are specialized to react to only a particular range of wavelengths. For example, we don't see heat until its wavelength comes into that range (red-hot metal suddenly becomes a light source). This part of electromagnetic radiation we can see is called visible light, and is commonly known as just light. We've discussed it shortly in the first article of this series, but let's add a bit of detail now. There are two kinds of photoreceptor cells in our eyes: cones and rods. When a ray hits them, they react and transfer some information to the brain. Rods are very light-sensitive and are responsible for night vision, seeing movement and forms. Cones, on the other hand, are much more interesting for us. They are able to separate the wave into particular wavelengths, that the brain interprets (roughly) as red (long), green (medium) and blue (short). Depending on what wavelengths the ray consists of, we perceive a color mixed of these three. But where do various wavelengths come from, if they are all brought by the same light source? Most of rays hit some object on their way, and then they're being reflected somewhere else (for example, to your eye). Usually the object they hit doesn't reflect them perfectly like a mirror. Some of the wavelengths are being absorbed by the object and they never reach your eye. As a result, we receive only a part of the original ray from that object. These remains of the ray are then interpreted by your brain as the color of the object. Different colors come from different absorbing and reflecting properties of materials. You probably wonder what it all has to do with color in painting. After all, we only paint with colors, we don't create them physically! I'm sure everything will become clear in a second. Hue, Saturation, Brightness Is there something more confusing than this? Our intuition tells us what hue, saturation and brightness is, but when it comes to painting, it's hard to guess how to use it. Hue is, well, color, right? Saturation is a level of vividness... and brightness tells us if something is dark or bright. But it only makes sense as long as you talk about a finished painting, and it's much harder to guess where to put it all when you do it yourself. However, all we need is to understand where all these values actually come from! The Definition of Hue Hue is a "type" of color. Red, purple, olive, crimson are all hues. They're based on the mechanism we've just talked over - the reflected wavelengths, mixed in various proportions, create a final color interpreted by brain. Therefore, putting it simply, hue is based on "the color of the object". An interesting fact: silver, gold or brown aren't hues. Silver is shiny gray, gold is shiny yellow, and brown is dark or unsaturated orange. No matter how many names we invent for the hues, all of them base on red, green and blue. The further on the color wheel you are from any of them, the more "original" color you'll get. For example, 50% red + 50% green gives yellow, but change this proportion just a little bit and you'll see a greenish or reddish tint. There's no greater or lesser hue, being put on a wheel they're all equal. Hence we describe them by degrees instead of a percent value. The Definition of Saturation Hue doesn't mean color (at least not formally). All the circles below have the same hue, the same exact position on the color wheel (the same brightness too!). So why do we perceive them as different colors? The common definition of saturation is how much white there is in the color. But wait, wasn't that about brightness? You want brighter color, you make it whiter... But that would make darker areas more saturated. It's so confusing, isn't it? That's why we need more explanation. Saturation is the dominance of color. The three samples below have the same brightness and hue. The only thing that changes is the proportion between the components. We're not "adding white" - we're reducing the distance between the components, so none of them stands out. As you can guess, when there's no difference between the components, we've got no saturation, which gives us white (we don't include brightness yet). The Definition of Brightness For our needs we can treat brightness as synonymous with value from the previous article. It defines the maximum of a value our eyes can perceive. There's no more blue than 100% blue, just like there's nothing brighter than 100% white. The bars can't be filled over the maximum: And, obviously, black comes from the lack of information. An interesting fact: when it's dark, our cone cells get a little information, what makes us a bit color-blind. At this time rod cells, sensible to any light, will take over. However, since they're the most sensible to green-blue light, they'll make any green-blue object look brighter. It's called the Purkinje effect. Luminance Despite having a certain, absolute brightness, every color has another property, luminance. While brightness tells us how much of color there is in the color, some of hues appear brighter to us - even when they're all 100% bright. Luminance is about how bright color is relative to white. When we turn 100% bright primary colors to grayscale, their brightness suddenly drops. They still make white, but blue turns out to be very, very dark, and green the brightest of them all. It comes from individual sensitiveness of every cone, and that's why we perceive yellow (bright red + very bright green) as the brightest of colors, or why cyan (dark blue + very bright green) is sometimes called light blue. Luminance is important when you start your picture in grayscale - for example, yellow needs a brighter base than other colors of the same absolute brightness.