Color Theory

Color theory is the study of color relationships and how they affect design. Learn about Color Wheel, Color Schemes, and Design Principles.

Isaac Newton (1641-1727) had the first evidence (1666) that color does not exist. Enclosed in the dark, Newton let a small beam of white light pass through a hole.

Intercepting that light with a small crystal, a prism consisting of a triangular base, he perceived the ray of light passing through the glass, decomposed, and then the six colors of the spectrum appeared when they reflected on the wall.

Color is, therefore, a reality of the vision resulting from differences of perceptions in the eye to different wavelengths. This makes up the spectrum. These visible waves range between 400 and 700 nanometers; radiations beyond these limits exist, but our site doesn't perceive them.

Color Theory is used to describe the compilation of regulations and guidelines concerning color in art and design. Color theory helps formulate the design in terms of color schemes, aiming to improve the aesthetic appeal and build effective communication on a visual and psychological level.

Color theories also form a rational structure for color. Modern color theory is mainly based on Isaac Newton's color wheel based on red, yellow, and blue.

Sir Isaac Newton built the first circular diagram of colors in 1666, displaying three categories of colors:

  • Primary colors (red, blue, yellow) - Primary colors are the three colors that cannot be mixed or formed by the combination of other colors. All other colors are the resultant of these three hues.
  • Secondary colors are colors that are created by mixing two primary colors.
  • Intermediate or tertiary colors are created by combining primary and secondary colors. Colors can be put together to form one of five central color schemes that allow the designers to achieve harmony.

Color Wheels and their purpose:

Mixing Colors:

Every color that the artist would like to apply isn't available in paint, and neither is it economical to afford so many paints. This means that the artist should know their way around mixing different colors to get the desired color, which requires experimenting with colors as they all have different features.

Experimenting while working might cause a glitch in the artist's creativity flow, causing them to lose their focus and zone out. Hence, it is convenient to study the color wheel in advance.

When used for mixing color, the benefit of a color wheel is that the position of hues and their distance against each other assist in visualizing the proportions of the mixtures.

The color wheel runs on the logic that by being able to remember a few hues' positions helps one to know which color is behind a position possibly. For example, if the color red is positioned at 0° and the color yellow is positioned at 60°, one can easily guess which color is behind the position of 30°.

Determining Colors:

The color wheel helps in finding out the color values of a color sample. To find out how well two samples match or how far apart they are from each other is to compare the existing color sample with a set of well-defined colors.

Picking up the set's closest matching color and then looking up at its color values makes selection easier.

The difficulty is significant because a balanced amount of colors in a comparison set is required. Another factor is how color dimensions are segmented.

The best way to segment color dimensions is by equal perceptual differences. A color wheel illustrates a comparison set of colors which helps determine colors better.

Selecting Colors:

Theoretically, one has 16.7 million colors to choose from, so deciding which is the right color or the most suitable one can be a tough nut to crack. Moreover, choosing a color depends not only on one color but also on how it would look in context with other colors.

Color wheels are frequently used to apply the several theories and principles formulated to simplify selecting colors over the years.

An appropriate color wheel used for selecting colors supports applying principles and theories by which aesthetically pleasing outcomes are formed. The outcome of a color selection is perceived to be aesthetically appealing. This may not be true for color wheels designed for mixing or determining colors.

Color Harmony:

In color theory, color harmony refers to the aesthetically pleasing color combinations. These combinations create harmonious contrasts. These combinations can be complementary colors, color triads, split-complementary colors, or analogous colors.

Color harmony has been a topic of broad study throughout history, but only since the Renaissance and the Scientific Revolution has it seen solid substance matter in understanding them. Artists use harmonies to achieve moods or add an aesthetic quality to their works.

Harmony works on keeping the viewer engaged, creating a sense of order, and balances the visual experience. When visuals are not in harmony, it tends to be either monotonous or chaotic.

Monotony and chaos are the two ends of a spectrum; at one end is a visual experience that is bland and doesn't engage the viewer, and when this happens, the brain rejects under stimulating information.

On the other end, extreme is an overdone visual experience, which is so chaotic that the viewer can't stand to look at it. The human brain does not accept what it cannot understand or organize. Hence, visual tasks require a logical structure, giving a sense of order.

Colors can be put together to form one of the five central color schemes that allow designers to achieve harmony in their designs. These are:


Analogous colors are based on the three colors located next to each other on the color wheel. They share a standard color, one of them being the dominant color, which tends to be a primary, secondary, or tertiary color.

The term analogous points to having an analogy or corresponding to something particular, this color scheme results in creating a vibrant, monochromatic look.

It is best suited to be used with either warm or cool colors, which results in a look that has a certain temperature and a proper color harmony. But the scheme also tends to lack contrast and is a lot less vibrant than complementary schemes.


When one or more pairs of colors are combined, they cancel each other out, producing high contrast. By presenting a grayscale color like white or black, they create the strongest contrast for those two colors when placed next to each other. Complementary colors are also called opposite colors.

The color wheel can be divided into an endless number of times to include all gradients in between these primary hues. No matter what shade or tone of the color, the opposite color is always complimentary.

Complementary colors consist of one cool color and one warm color. Orange, red, and yellow are warm colors. Blue, green, and purple are the cool colors; this helps create simultaneous contrast.

Simultaneous contrast occurs because of the natural illusion that happens when you place two complementary colors next. Both colors are appearing brighter and grabbing a viewer's attention.

Artists use this to their benefit all the time. For example, sunsets with gradients from deep blues to bright oranges are more eye-catching because they rely on simultaneous contrast. Similarly, if your tube of red paint isn't bright enough, paint something green next to it.

Complementary colors can be used to make a hue a lot less vibrant. The more color you add, the more neutral it becomes. For instance, adding a green paint to red will give birth to a burnt sienna; add a little more, and it creates a darker sienna.

Mixing the two paints in equal parts will get a warm-toned dark brown. These neutrals can further be manipulated by mixing in white, grey, or black.


A combination of the analogous and complementary scheme is a variation of the complementary color scheme. This color scheme has lesser tension and a similar rich visual contrast as the complementary color scheme.

The base color is the primary color. We attain a mixture consisting of one warm and two cold colors or vice versa as there are two secondary colors, the base color in never strong enough or clearly dominant. This scheme can be balanced with warm and cold colors better than a complementary scheme; several monochromatic shades of different colors can also be added. This scheme is often more comfortable and softer; it also has more space to balance between warm and cold colors.

When used in a design, the meaning of secondary colors should be accurately defined or stated. For example, one for active or passive elements, another for information, highlights, etc. The primary parameter of this scheme is the distance maintained in the secondary colors.

The closer they are, the similar to the complementary color scheme they will seem.

To be differentiated, distance has to be maintained. The more the distance, the more vibrant the color scheme is. If the distance is 120°, all three colors get evenly distributed around the color wheel, and the scheme becomes a particular variant: the triad.


A triadic color scheme makes use of colors that are spaced at even intervals on the color wheel. Triadic color harmonies tend to be vibrant even if pale or unsaturated versions of hues are used. For a triadic harmony to thrive, the colors ought to be carefully balanced, with one color dominating and using the two others for accent.

Having equal distance between all colors, it is also a particular variant of the split-complementary color scheme.

As all colors are evenly distributed in the color wheel, there is no significant dominance of one color. Shades of all three colors can be used with a triad, but the most desired effect and vibrant colors are produced with bold and higher saturation shades.


Using two sets of complementary pairs, the tetradic color scheme uses four colors that are arranged into two complementary pairs. This vibrant color scheme offers various possibilities for contrasts and differences.

The tetradic color scheme works at its best when one color is left to dominate. Paying heed to the balance between warm and cool colors in the design adds to its aesthetic value.

This color scheme being a variant of the dual color scheme, has an equal distance between colors. All four colors are dispersed consistently around the color wheel. Hence there is no dominance of one color.

The scheme is nervous, colorful, and vibrant. There exists an equal amount of tension between all colors. Tetrad is a very aggressive color scheme that requires good planning methods and sensitive approaches.

Tetradic colors form a rectangle on the color wheel. The colors on the shorter side of the rectangle are spaced one color apart.

Offering a rich harmony and opportunities for variations and letting one out of color colors dominate brings out the best results.

Color Context:

Color context refers to how color behaves in accordance with various other colors and shapes. The color red will appear richer against a black background and kind of duller against a white background.

Studying the effects color has on each other helps to understand the relativity of color. Its relationships, values, warmth, and saturation can cause differences in our perception.

Value or Luminosity:

In color theory, a color value is actually a shade of lightness. The terms lightness and color value could also be used interchangeably.

Color values are most often presented in a chart or graph form to help developers understand and choose from various shades of color for the purpose of visual projects.

A color value scale begins with light and ends with a dark shade. Categories in between might include light or medium, medium, and medium, or dark.

Color values for digital projects are mostly represented on a digital graph, scale, or for users to choose from. Along with color values, users can also add higher or lesser amounts of red, green, blue, or other primary colors to create secondary colors.

Colors that are high in value tend to reflect more light, and those with low value are darker and absorb more light. In a chromatic circle, yellow has the highest luminosity and is closer to white. Regardless of its value, colors can be altered with the addition of white or black.

A color can be defined by a hue ranging from 0° - 360°, saturation ranging from 0% - 100% and lightness from 0% - 100%. Luminance measures perceived brightness.

The Scale of Values:

In visual arts, an area's relative degree of lightness or darkness is commonly referred to as its value. Contrasts that occur in values allow an individual to see lines, shapes, and to be able to sense depth and dimensionality. It can also perceive surface textures.

Our eyes are guided through the patterns of value contrasts, which motivate us to focus on particular artwork locations. Value choices even affect our psychological and emotional reactions. The value consists of expressive ability, and an understanding of value is primary to the study of art because it applies to almost all the elements.

An artist will create an image with contrasting, similar, or any combination on the value scale. Sometimes, designers and artists use an extreme contrast of black and white for dramatic effects. Other times, to create harmony in a piece, an artist can also choose to work closely with values.

Instead of using the whole spectrum, the artist selects values within a restricted range. A work that uses predominantly dark values, ranging from middle gray to black, may have low-key values. Artist: Robert Bauer When a work contains mostly light values, ranging from white to middle gray, it is said to have high-key values.

A small number of opposite values can be introduced for accents, but those contrasting accents should not destroy the dominant feeling of lightness or darkness.

The selected key will establish a general mood of the work – a dark area creates an atmosphere of gloom, mystery, drama, or menace. In contrast, a basic light composition (high-key) will produce the opposite effect.

Renaissance artists Leonardo da Vinci and Michelangelo solidified the system of chiaroscuro. This became a process of using light (Chiaro) and dark (scuro), which creates an illusion of solid form. Based on observations on light and shadow, chiaroscuro engages a purposeful grouping of value shapes that gradually change from light to dark. This pattern of value shapes and gives an illusion of volume.

Chiaroscuro is a method that applies value to a two-dimensional piece of artwork and creates an illusion of a three-dimensional solid art form. Used by artists Leonardo da Vinci and Raphael, these workings were devised during the Italian Renaissance.

In this method, when the light comes in from one predetermined direction, then light and shadow will adhere to a few rules. A highlight is marked at the point where the light is reflected head-on. This light is most often bright white.

Hue, Saturation, and Brightness:

The concept stands for the vividness, whiteness, and intensity of a color.

Pure colors of the spectrum are saturated. Saturation can be perceived as the brilliance of one color. The lack of grey can also define this; the grayer or more neutral it is, the less saturated the color becomes.

Hue, saturation, and brightness come under the red, green, and blue color scheme; these terms are most often used to refer to each pixel's color in a cathode ray tube. All colors can be specified according to hue, saturation, and brightness. This phenomenon is also known as brilliance.

Most sources of visible light do contain energy over some wavelengths. Hue is the wavelength within the visible-light spectrum, at which point the energy output from the source is on its peak. Hence, this is shown as the peak of the curves in the graphs of intensity versus wavelength.

Saturation is expressed by the relative bandwidth of the visible output coming from a light source. As saturation increases, colors appear purer. As saturation decreases, colors appear more washed-out.

Brightness is expressed by the intensity of the energy output of a visible light source. This can be expressed as a total energy value different for each curve in the diagram, or as the amplitude at which the wavelength intensity is the greatest.

In the Red Green Blue color model, RGB's amplitudes for a particular color can range from 0 to 100 % of full brilliance. These levels are shown by a decimal range of 0 to 255 or hexadecimal number range of 00 to FF.