ArtSpeakElements: ColorCoursesMAT-110 (full term course)MAT-110 (8-week Course)MAT-120 SyllabusMAT-135 Syllabus (Fall)MAT-210 SyllabusMAT-225 SyllabusTutorialsArt & DesignSoftwareWeb

What is color?

In short, shade is the visual byproduct the the spectrum that light as it is one of two people transmitted through a transparent medium, or together it is absorbed and reflected off a surface. Color is the irradiate wavelengths the the human eye receives and processes from a reflect source.

You are watching: Media saturation refers to the amount of

For the physics behind color, check out the Primary color Models page. This will certainly REALLY help you know how color works!

Color consists of three main integral parts:

huevaluesaturation (also called “chroma”)Let’s begin with “hue

Hue is an ext specifically defined by the dominant wavelength and also is the first item we describe (i.e. “yellow”) when including in the three components of a color. Hue is likewise a ax which describes a dimension of shade we readily experience once we look in ~ color, or its pure form; it basically refers come a color having complete saturation, together follows:

When mentioning “pigment primaries” (CMY), no white, black, or gray is added when 100% pure. (Full desaturation is identical to a muddy dark grey, as true black color is no usually possible in the CMY combination.)

When mentioning spectral “light primaries” (RGB), a pure hue identical to complete saturation is identified by the proportion of the dominant wavelength to various other wavelengths in the color.

Next, let’s look in ~ the “value

As is questioned on the “Elements: Value” page, value describes the lightly or darkness the a color. It indicates the quantity of irradiate reflected. Once referring to pigments, dark values v black included are referred to as “shades” the the given hue name. Light values v white pigment included are dubbed “tints” that the hue name.

Lastly, let’s look at “saturation,” or “chroma

Saturation specifies the brilliance and intensity of a color. Once a pigment hue is “toned,” both white and black (grey) are included to the color to mitigate the color’s saturation. In terms of the “additive” light color model, though, saturation works on a scale based upon how much or how tiny other hues are represented in the color.

(NOTE: In the an easy scale diagrams below, the an initial model indicates amount the black, white, or grey pigment added to the hue. The 2nd model illustrates the exact same scale but explains the phenomenon based upon light properties.)

Pigment Scale
Light Scale

The HSV shade Scale

The scales over illustrate the value and also saturation alters of a hue in the same means visually, although they describe what’s keep going differently based upon how pigment functions vs. How light works. This is a relatively simple means of looking at it, yet it still can not be fully clear. There is a an ext complex, 3-dimensional range that permits us to look at how hue, saturation, and also value intersect to produce colors: the “HSV Scale.”

The HSV scale plainly stands because that “Hue, Saturation, Value.” that does a better job in ~ visually explaining the ide of light, and also it is a very useful one to comprehend, as it is what most innovative digital shade pickers are based on (including all Adobe software). Not just do graphic designers need to recognize this color construct, but fine artist do also since digital art and also rendering has become such one integral part of art processes.

All shade Starts through Light

Regardless of the 2 Additive and Subtractive shade models, all shade is a an outcome of exactly how our eyes physically procedure light waves. So let’s begin with the irradiate Additive design to see exactly how it filters right into the Subtractive model and to see just how hues, values and saturation communicate to produce unique colors.


The three main hues in light are red, green, and blue. Thus, the is why televisions, computer system monitors, and also other full-range, electronic shade visual display screens use a triad of red, green, and blue phosphors to create all electronically communicated color.

RGB Primary shade Triad

As we mentioned before, in light, all three of these wavelengths added together at complete strength produces pure white light. The lack of all 3 of these colors produces finish darkness, or black.

Mixing nearby Primaries = secondary Hues

Making Cyan, Magenta, and also Yellow

Although additive and also subtractive color models are taken into consideration their own distinct entities for display screen vs. Print purposes, the hues CMY perform not exist in a vacuum. Lock are developed as second colors once RGB light hues room mixed, together follows:

Blue + Red light –> MagentaRed + green light –> yellowgreen + Blue light –> Cyan
CMY secondary Light ColorsOverview the Hues

The colour on the outermost perimeter the the shade circle space the”hues,” which room colors in their pure form. This process can proceed filling in colors about the wheel. The next level colors, the tertiary colors, are those colors between the an additional and primary colors.

Primary, Secondary, and Tertiary Hues


Saturation is likewise referred to together “intensity” and also “chroma.” It refers to the supremacy of hue in the color. On the outer edge the the hue wheel room the ‘pure’ hues. Together you move right into the center of the wheel, the hue we are using to define the shade dominates less and also less. Once you reach the facility of the wheel, no hue dominates. This colors directly on the main axis are taken into consideration desaturated.

Desaturation: hue becomes less dominant, moves to circle’s centerNaturally, opposing of the image over is to saturate color. The first example listed below describes the basic direction color must relocate on the color circle come become more saturated (towards the outside). The 2nd example depicts how a solitary color looks fully saturated, having actually no other hues present in the color.

General Saturation Direction
“Pure” Hue With finish Saturation: no other hues present


Now let’s include “value” come the HSV scale. Value is the dimension of lightness/darkness. In terms of a spectral definition of color, value explains the all at once intensity or stamin of the light. If hue deserve to be assumed of together a dimension going approximately a wheel, then worth is a direct axis running with the middle of the wheel, as watched below:

HSV design with Hue, Saturation, and also Value ExplainedTo better visualize also more, look at the example below showing a complete color range for a single hue:

HSV version With Full selection of solitary HueNow, if friend imagine that each hue was additionally represented together a slice like the one above, us would have a solid, upside-down cone that colors. The example over can be taken into consideration a part of the cone. Notification how the right-most edge of this cone slice shows the biggest amount that the dominant red hue (least lot of other contending hues), and how as you go under vertically, it it s okay darker in “value.” Also an alert that as we take trip from ideal to left in the cone, the hue becomes less dominant and eventually becomes completely desaturated follow me the vertical facility of the cone. This vertical facility axis of complete desaturation is described as grayscale. See just how this slice below translates into some isolated shade swatches:

Cone part Swatches

Color Pickers

With this explanation, it might be much easier to then know how modern-day color pickers work. There room many types of color pickers, yet this example will emphasis on the common Adobe software interface picker, continuing to use the red hue together the instance below. By the way, called the similarity of our cone-shaped red slice above to the “Select Color” window below to better visualize just how this works.

In Figure-1 below, first notice the facility vertical slider. This is wherein we pick the hue. The is currently collection to the lowest an option and synchronizes to the “H:0” radio switch value top top the right. The “H” suggests “Hue,” and the zero value defines which numerical hue assignment we have selected. Listed below it, girlfriend will view that “Red” is collection to “255,” or the fullest level the light stood for on a computer system (0 = lowest). Notice that Blue and Green are collection to zero, indicating that Red is at its fullest level the saturation.

Next, an alert where the picker one is in the “Select Color” window. The is located at the top-right, indicating whereby on the range you want the saturation come fall. As we said, the sample is indistinguishable to the purest red hue with full saturation, and it corresponds to the outermost edge of the color wheel. The “S:100%” on the right defines the level the saturation in the color we have selected, and the “B:100%” corresponds to the brightness, or value.

As a next note, an alert that under the CMYK levels the Yellow and Magenta room basically equally stood for at their fullest capacities. This supports just how in the Subtractive shade Model, red is a second color that yellow and also magenta.

Figure 1: RGB color Mode – Pure Red HueNow, together a means of comparison, look in ~ the following model. Perform you watch the difference?

Figure 2: RGB shade Mode – Pure Red HueIn instance you don’t watch the difference, the is in the Hue number setup and where the slider is located. This is basically the same hue as in the ahead Figure-1, other than that the setup has gone from 0 come 360. This is because we are basing that on the HSV cone design as depicted earlier, and also the hues at the optimal of the upside-down cone room in a full 360-degree circle. Thus, we have completed the circle by starting at the zero-level red and also moving through the complete visible spectrum to the same 360-level red.

See more: Why Are There Rocks On The Roof ? Why Are Rocks On A Flat Roof

To gain a more complete picture of exactly how this works, allows look in ~ the RGB indistinguishable of “cyan”, i beg your pardon is directly throughout from the on the color wheel, and is hence red’s complementary hue.

Figure-3: RGB Models rendering of the secondary CyanNotice the in Figure-3 that the hue setting is “180,” or situated at 180-degrees on the shade circle, fifty percent of 360. This is what numerically indicates the cyan is red’s complement. Also, you’ll notification that it is the second RGB shade produced by mixing equal parts Blue and Green, wherein Blue=255, and Green=255. As a fast reminder of the straightforward color wheel to aid you visualize, right here is exactly how cyan relates to red: