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.
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.
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.
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.
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.
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.
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.
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 1⁄3 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 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.
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.
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.
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%.
Polar coordinates for hue and saturation, slider for value.
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.
Cartesiant Coordinates for value and saturation, slider for hue.
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.
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 Alternative
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.
For example, we can isolate the three different channels of a photograph to see how a computer represents them using an additive color model.
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
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
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.
- the color of blue (rebecca solnit)
- evolution of color (odyssey, necessity)
Color Theory Article