Navigation

Color Theory Explained

This post will explore how we perceive color, the difference between additive and subtractive, as well as the different color systems: CMYK, RGB, HEX, and HSB.

Blog Images-01According to Wikipedia, “Color is the visual perceptual property corresponding in humans to the categories called red, blue, yellow, etc. Color derives from the spectrum of light (distribution of light power versus wavelength) interacting in the eye with the spectral sensitivities of the light receptors.”

Blog Images-02To understand this better, one sees color only because the object that is seen is reflecting light into our eyes, and our eyes interpret the frequency of the wavelength of the light as either Red, Blue, or Green. This code is then transmitted to the brain via the optic nerve and the brain interprets this as a color. This interpretation varies from person to person. Since visible light contains the color spectrum, grass, for example, looks green but is in fact every color but green, green being the one color it reflects & does not absorb.

Blog Images-03

Author’s Own Graphics

According to Reference.com, “Electromagnetic radiation is energy that comes from a wide variety of sources. It comes in a broad spectrum of wavelengths, frequencies and energies. Scientists break the electromagnetic spectrum into several different categories, including electrical energy, radio waves, microwave energy, infrared light, the visible spectra, ultraviolet rays, X-rays and gamma radiation. When Electromagnetic radiation reaches between 350 nano meters (nm) and 700 nm it is visible color. For example, at 0.01 nm it is X-ray & is the same scale as an atom; at 1000 nm it is infrared light & is the same scale as a human hair.”

Blog Images-04

Author’s Own Graphics

Blog Images-05

Author’s Own Graphics

“A Subtractive Color model explains the mixing of a limited set of dyes, inks, paint pigments or natural colorants to create a wider range of colors, each the result of partially or completely subtracting (that is, absorbing) some wavelengths of light and not others. The color that a surface displays depends on which parts of the visible spectrum are not absorbed and therefore remain visible.” ~Wikipedia

All colors mixed together become black (unless you’re painting).

“Additive Color is color created by mixing a number of different light colors (where the color is a beam of light), with shades of red, green, and blue being the most common primary colors used in additive color system.” ~Wikipedia

All colors mixed together become white.

Blog Images-06

Author’s Own Graphics

1. The Painter Primaries:  This is pretty much what we all learned in art class at a very young age. The (3) primary colors are red, yellow, and blue. Red + Yellow = Orange, Yellow + Blue = Green, Blue + Red = Violet.

2. The Printer Primaries (CMYK):  This was developed for printing. CMYK stands for Cyan, Magenta, Yellow, and Key. The Key is Black. This process is more like an optical illusion on paper. The colors are layed down as tiny dots. Images are broken down into (4) layers, corresponding to each hue. The amount of Cyan, Magenta, Yellow, and black, are varied from 0 to 100% to get different colors. For example: Blue is represented as 50,50,0,0. Where 50% Cyan + 50% Magenta + 0% Yellow + 0% Black is used.

Blog Images-07

Author’s Own Graphics

3. The Light Primaries (RGB):  This was developed for LCD screens. RGB stands for Red, Green, and Blue. Red + Green = Yellow, Green + Blue = Cyan, and Blue + Red = Magenta. The amount of Red, Green, and Yellow are varied from 0 to 255 Units to get different colors (Up to 16 million). Imagine the surface of the screen covered with tiny RGB light bulbs shining at different intensities. The mosaic of lights is perceived as a complete image. For example: Red is represented as 255.000.000. Where 255 represents Maximum Red Value + 000 represents No Green + 000 represents No Blue.

Hexadecimal:  There are 256 possible shades each of Red, Green, and Blue. If we wanted to produce White, we’d need to write #255255255. That’s (9) digits long. According to Codeconquest.com, Hex codes use hexadecimal number system to make it possible for 256 numbers to be represented with only (2) digits. Instead of counting 0-10 like our regular decimal system, it counts 0-9, A-F. then 10, then 11-19, then 1A-1F, then 20. This means that 256 numbers can be represented using only (2) digits. So the highest possible two digit number is not 99 but FF (= 255). This is why White is #FFFFFF, and pure red is #FF0000.

Blog Images-08Although our eyes see color through retinal cells that detect red, green, and blue light, we don’t think in RGB. Rather we think about color in terms of Hues, Saturation, and Brightness. Primary colors are Blue, Red, and Yellow; Secondary colors are Violet, Orange, and Green; and Tertiary colors are Violet-Red, Red-Orange, Orange-Yellow, Yellow-Green, Green-blue, and Blue-Violet. To simplify these terms, producers name their hues objective terms such as Sapphire, Orchid, Jade, etc. These names are not absolutes, so there is actually more confusion as a Sapphire color by Benjamin Moore may be more blue than a Sapphire from Sherwin Williams.

 

Blog Images-09

Author’s Own Graphics

Visualize the traditional color wheel as a 3D sphere, where the wheel is the equator. The top of the sphere is White, and the bottom is Black. As one moves on the X and Y Axis, from the center out, the level of Saturation changes. Hues are at their most Chromatic at the equator. This transition from Grey to Pure Hue is the Saturation level. As one moves on the Z Axis, the Value of the color changes. The level of Brightness changes. As one moves from the center to the top white hemisphere, the tint of the color changes. As one moves from the center to the bottom black hemisphere, the shade of the color changes.

Blog Images-10

Author’s Own Graphics

For example, Pink is not a pure color. It is Red with a varying Tint. Brown could be an Orange-Yellow with a varying shade. Grey is when one moves in the Z Axis, and does not move in the X or Y.