Study of Color (draft)

Color is the result of the radiation of electromagnetic waves. In the solar system the sun produces radiation from the process of nuclear fusion in its core. Light radiates outward from the sun bathing the Earth’s surface in light. Objects reflect different frequencies of light based on the material that the object is made out of. These frequencies of waves get interpetted as color to the human eye. The range of possible colors can be defined by a color’s frequency (hue), intensity (lightness), and peculiarity (saturation).

Light from the sun can be decomposed into a range of possible hues using naturally occuring optics. Clouds and rain in the sky produces a rainbow when the conditions and angle of sunlight is right. Soap bubbles have an iridescent surface that similarily displays the range of possible hues. A glass triangular prism can be used in a controlled environment to split light into the visible spectrum.

Color theory organizes represents color with additive and subtractive color models. Additive models are used within pixels in a computer screen. Subtractive color models are used in printing and mixing paint together. This article explores the range of possible colors, the human perception of color, a computers representation of color and the different color pickers that allow a user to navigate the possible three-dimensional color space.

Color Intensity

The first property of light is intensity also called luminance. The human eye contains photoreceptor cells in the retina that percieve electromagnetic radiation through three distinct channels. When all three channels register light at the same time the pereived color is white. Lower intensity waveforms composed of all three channels appear as gray and finally the absense of light appears as the color of black. The monochromatic scale is the simplest representation of color.

Color Intensity Grayscale

With the introduction of different shades of color, it is worth noting that the constrast between two different intensities of light influences how the human brain percieves the color. The graphic below demonstrates how a neutral gray value surrounded by darker values appears brighter than it actually is. Inversely a neutral gray value surrounded by light colors appears darker than it really is.

Grayscale Illustion

Color Spectrum

Isolating specific wavelengths in the visible spectrum yields the range of possible color hues. The color red is associated larger wave frequencies and blue is associated with shorter wave frequencies.

Color Spectrum

Basic Hues

The primary colors are distinct colors within the visible spectrum. Since the human eye perceives color through three channels, a color model only needs three primary colors to derive the other colors.

Name Color
Red Red Color Hue
Yellow Yellow Color Hue
Green Green Color Hue
Cyan Cyan Color Hue
Blue Blue Color Hue
Magenta Magenta Color Hue

Additive Color Model (RGB)

Just as light can be decomposed into individual colors, colors can be combined back together to create the color white. This can be achieved by shining red, green, and blue lights onto a white wall. More commonly this technique is used in computers, discussed below, to render colors using three RGB diodes.

Additive Color Model

Subtractive Color Model (CMY)

Subtractive color is the process that an artist uses when mixing a shade (hue) of color on their palette. The three colors Magenta, Cyan, and Yellow are used to this effect. When mixing a combination of these colors together the resulting color will be darker than the original colors.

Subtractive Color Model

Color Wheel

The color wheel visualizes the possible color hues along the perimeter of a circle. This is an effective and common representation of the possible colors hues as well as how colors can be mixed to produce new colors. Pick any two points along the perimeter of the circle no further than 13 the perimeter of the circle apart and a gradient is formed between the two colors that represents how one color transitions into the next.

Color Wheel

Color Circle (Additive Color Model)

The color circle is a extension of the color wheel that introduces a new dimension of saturation. The colors along the perimeter are fully saturated colors (hues) and the center of the circle is the most desaturated color, white.

Color Circle Specrtrum

The color circle is useful for modeling the addititive color model as discussed above. For example, we can isolate the three channels into their own separate color circles. The three circles below “add” together to form the color cirlcle above. Biologically, this corresponds to how the human eye percieves light through three separate channels.

Color Circle Red Channel
Color Circle Green Channel
Color Circle Blue Channel

Cylinder of Possible Colors (HSV Scale)

The hue, saturation, value scale is the result of extending the color circle by introducing a third dimension of value (intensity). The three components of a color is then the hue of the color which is determined by the angle in polar coordinates, the saturation of the color is determined by how far away from the center of the circle the color is, and finally the value corresponds to the intensity of the color.

Hue Saturation Value Cynlinder

Sometimes this range of colors is also represented using a cone instead of a cylinder where the bottom tip of the cone is the color black. However, since later color pickers are discussed in applications the cylinder corresponds more closely to the interactive components of the color pickers.

HSV Color Picker

The Hue, Saturation, and Value color picker allows the user to select color based on the three-dimensional space of hue, saturation, and value. The hue is represented as an angle, the saturation as a percentage from 0% to 100%, and the value as a percentage from 0% to 100%.

HSV Color Picker

Polar coordinates for hue and saturation, slider for value.

HSV Color Picker Wireframe

HSV Color Picker Alternate

An alternative version a color picker for this color space instead places the hue (angle) of the color on a slider and then allows the saturation and value to be selected from a rectangular cross section of the HSV cylinder.

HSV Alternative Color Picker

Cartesiant Coordinates for value and saturation, slider for hue.

HSV Alternative Color Picker

Hue, Saturation, Lightness Cylinder

The Hue, Saturation, Lightness color space is another way to map the possible colors in three dimensional space. It is similar to the HSV color space, except that it prioritizes the user’s ability to control the lightness of a color. This is useful especially when rendering the shape or form of on object in a graphic.

Hue, Saturation, Lightness Color Space

HSL Color Picker

The Hue, Saturation, Lightness color picker is similar to the HSV color picker, but now the intensity of the color is able to be controlled more easily.

HSL Color Picker Wireframe

HSL Color Picker Alternative

HSL Color Picker Alternative Wireframe

The Age of Compters & Color

Modern computers utilize colors in their displays. Just like how the human eye primarily perceives light through three channels, computers use three frequencies of colors red, green, and blue and an additive color model to represent color.

RGB Scale (Red Green Blue)

A computer’s display is made up of an array of pixels where each pixel is made up of a red, green, and blue diode. These three color channels combine to create a single color.

RGB Pixel Array

For example, we can isolate the three different channels of a photograph to see how a computer represents them using an additive color model.

Decompose rgb colors of a picture

RGB Color Space

The Red, Green and Blue color space can be visualized as a three dimensional cube in space where the axis correspond to the three color channels. Each channel is reprsented using 8 bits so it has a range of [0, 255] possible values or . There are 16777215 or possible colors using the standard representation of an RGB color.

TODO: RGB Color Cube

Limitations of transitioning between color models…

Color Gamut Image

Hexadecimal Representation

A six digit hexadecimal number representation is often chosen to represent a color in a computer. The first two digits correspond to the red color channel, the next two digits correspond to the green color channel, and the final two digits correspond to the green color channel.

base 16 corresponds to 256 possible

Hexadecimal Representation of RGB

RGB Color Picker

The RGB color picker is a psychedelic cross section of the RGB color space. The XY plane allows the user to navigate the possible values for the current third dimension represented by the slider at the bottom.

Red Green Blue Color Picker3


Coming Soon

Color Theory Article