Color

Color in science

The physics of light

A physical description of color encompasses the frequency components within the visible range of the electromagnetic continuum, whose wavelengths are between roughly 750 nm (red) and 380 nm (violet), going through the colors of the rainbow between. Note that this is a much smaller range (one doubling) than the range of audible frequency (about 9 doublings, or octaves).

Predominantly, the colors we see are reflected and filtered light rather than immanent light. Modern photo-realistic rendering software may create images by simulating the paths of light from virtual light sources, as they reflect, refract and diffuse through a virtual 3D space, eventually landing on the virtual camera lens surface to accumulate pixel values. This operation is very expensive and rarely can be achieved in real-time, hence the need for 'render farms'.

Since the colors we see are relective, they are dependent on the properties of the light source. Different sources of lighting have different intensities as well as different colours; daylight is generally more ‘blueish’ compared to indoor (incandescent) light, which is normally more ‘yellowish’ (and candlelight is more so), while the light of sunset can be very strongly ‘reddish’. Cameras have white-balance tools to counter-balance the effects of the colour inherent in ambient light, whilst 3-D modelling software usually has a parameter to set the colour and intensity of simulated ambient light.

Perception of color

Color is not a property of matter or energy - it is a property of our perceptual system, analyzing the light reflected by objects in our field of vision. We have three different kinds of light sensors (rods & cones) in the retina that are sensitive to different ranges of light wavelength, roughly red, green and blue, though they are certainly not equal. We have few blue cones for example, and they are not very sensitive.

http://www.apple.com/pro/color/tools/truecolors_video.html

Color in the moving image

Color was introduced to cinema in the 1920’s. A film can have a characteristic color, palette or treatment, and your key characters, objects, scenes, moods can also carry color. Far Eastern cinema has often been more color conscious in this sense than Western cinema. Akira Kurosawa’s “Dreams” is an excellent example.

Color systems

Though both digital media reduces color to red, green and blue components, our intuitive (or higher-cognitive) understanding of color is better served by dimensions of hue, saturation and luminance (also known as value).

The hue of a color is determined by its wavelength. The terms "red" and "blue" are primarily describing hue. Hue is the position of a color in the color wheel (it is thus cyclical). http://facweb.cs.depaul.edu/sgrais/color_hue.htm

Saturation is the intensity of a particular color (an unsaturated color tends towards greyness).

Luminance is the perception of brightness, tone, or (relative) amount of light.


Munsell color system (subjective).


CIE color system (objective, below).

Color mixing

There are two models of color mixing:

Additive: Red + Green + Blue = White.
Light is additive, that is to say that white light is made up of equal amounts of red, blue and green. Red and blue make magenta, green and blue make cyan, and red and green make yellow. Additive color theory applies to lighting coloured objects with coloured light, and most digital domain color processing is also additive.

Subtractive: Magenta + Cyan + Yellow = Black.
Paint is subtractive, that is to say that black (or at least murky grey) is made of equal pigments of magenta, cyan and yellow. Red is made up of magenta and yellow, green is made of yellow and cyan, and blue is made of cyan and magenta. Subtractive color theory applies to adding colored filters to cameras and coloured light.

Digital color

A computer monitor (or video projector) can only display within a limited portion of the perceivable color range. The darkened space of a cinema is aimed to improve the both the perceptual range of color and of luminance possible for a projector. Likewise, the digital representation of luminance and color is bounded by the numeric resolution (or bit depth) of the encoding format (more on this later).

Many different systems exist to describe color, however in the digital domain three predominate:

RGB (and RGBA/ARGB)
- specifies color in terms of red, green, blue components. Thus, RGB is an additive system.

RGB more closely resembles the encoding and reproduction of color in the computer. Typical digital media software by default work with color in RGB space, since many display technologies are themselves based on RGB.

Digital RGB colors are described as a triplet of numbers from 0-255 (or 0-FF in hexadecimal, or 0-100%) for each of red, green and blue, a total of 16 million possible colors. Jitter uses the 0-255 scale for color, while Flash uses the hexadecimal system by default. The A stands for Alpha, or transparency, often encoded with the color data.

See also: http://facweb.cs.depaul.edu/sgrais/color_additive%20system.htm

For example:


WHITE	   [255 255 255]   #FFFFFF
BLACK	   [0   0   0  ]   #000000
RED        [255 0   0  ]   #FF0000
GREY-BLUE  [51  102 204]   #3366CC

CMY (and CMYK)
- specifies color in terms of Cyan, Magenta and Yellow components. This is more commonly used to describe colors for printing, in which C + M + Y = black (or nearly black in practice, hence the additional K component). This system is subtractive. We are unlikely to use CMY for video work.

HSV, HSB or HSL
- specifies a color in terms of Hue, Saturation and Value (Luminance). HSV more closely resembles the way we decode and think about color. Hue is the is expressed as an angle between 0 and 360’, from red, through green and blue and back to red again. Saturation and Value/Luminance are typically expressed as percentages.

The Jitter objects jit.rgb2hsv and jit.hsv2rgb can be used to convert between RGB and HSV formats.

Tone / luminance (sometimes called brightness)

A great deal of our visual perceptual system discards color and works purely with luminance, which is usually also relative to the amount of overall illumination. In the ‘luminance channel’, we perceive form, detail, shading, motion, and stereography. In the chromatic channels, we perceive surfaces, label and categorize objects, and have special color experience. Thus for example, spatial resolution is poorer in color regions with no variations of luminance.

Both luminance and color perception are relativistic. Luminance is relative to the overall amount of illumination (thus we can read text in a desert noon and a darkened studio), and color is relative to spatially neighboring color. For this reason, digitally encoded color requires millions of colors, yet a color-coded design should use a palette of about six consistent colors. Perceptual color segmentation is very fast, and good for classification, while luminance is better for spatial form and shape. This is why many cartoon styles use black borders around inked regions!

Tone and colour are the most abstract components that fill shapes and spaces; they are always present, but can be more or less complex in their distribution.

When shooting a scene, there are three ways to control brightness:

A lack of contrast in tone can lead to a dull image, however this can be used creatively to carry meaning. Extreme contrast can be achieved photographically by shooting against the light (reverse-lit subject).

The visual center of interest is where the lightest light meets the darkest dark.

Color meaning

The set of colors used in a work carries a great deal of meaning. The meaning can be broken down into the internal meanings of color, and the effects of the juxtaposition of color (independent and dependent meanings).

Associations

Colors may have many non-verbal associations (color symbolism), which may vary both culturally and individually. Some of these meanings may be more spurious than others, however we can identify some general properties:

Cool Color (calming): Blue, Green, Turquoise, Silver

Cool colors tend to have a calming effect. At one end of the spectrum they are cold, impersonal, antispectic colors. At the other end the cool colors are comforting and nurturing. Blue, green, and the neutrals white, gray, and silver are examples of cool colors. In nature blue is water and green is plant life - a natural, life-sustaining duo. Combine blues and greens for natural, watery color palettes. Heat up a too cool color palette with a dash of warm colors such as red or orange. If you want warmth with just a blue palette, choose deeper blues with a touch of red but not quite purple or almost black deep navy blues. Cool colors appear smaller than warm colors and they visually recede so red can visually overpower and stand out over blue even if used in equal amounts.

Warm Color (exciting): Red, Pink, Yellow, Gold, Orange

Warm colors rev us up and get us going. The warmth of red, yellow, or orange can create excitement or even anger. Warm colors convey emotions from simple optimism to strong violence. The neutrals of black and brown also carry warm attributes. In nature, warm colors represent change as in the changing of the seasons or the eruption of a volcano. Tone down the strong emotions of a warm palette with some soothing cool or neutral colors or by using the lighter side of the warm palette such as pinks, pale yellows, and peach. Warm colors appear larger than cool colors so red can visually overpower blue even if used in equal amounts. Warm colors appear closer while their cool counterparts visually recede .

Mixed Cool/Warm Color: Purple, Lavender, Green, Turquoise

Colors with attributes from both the warm and cool colors can calm and excite. These are colors derived from a mix of a cool and warm color such as blue and red or blue and yellow. A cool blue and a warm red combine to create deep purples and pale lavendars. To a lesser extent, shades of green, especially turquoise and teal, also have both the warming and cooling effects born of warm yellow and cool blue. Some light neutrals such as cream, pale beige, and taupe evoke some of the same warm and cool feelings of purples and greens. The opposite or clashing color for purple is green and for green, purple.

Neutral Color (unifying): Brown, Beige, Ivory, Gray, Black, White

The neutral colors of black, white, silver, gray, and brown make good backgrounds, serve to unify diverse color palettes, and also often stand alone as the only or primary focus of a design. Neutral colors help to put the focus on other colors or serve to tone down colors that might otherwise be overpowering on their own. To some extent blacks, browns, tans, golds, and beige colors are considered warm. While white, ivory, silver, and gray are somewhat cooler colors. Yet these warm and cool attributes are flexible and more subtle than that of reds or blues.

More online resources for color meaning:

Interactions

Josef Albers - Interaction of Color

Wikipedia: "Josef Albers (March 19, 1888 – March 26, 1976) was a German artist, mathematician and educator whose work, both in Europe and in the United States, formed the basis of some of the most influential and far-reaching art education programs of the 20th century. He studied art in Berlin, Essen, and Munich before enrolling as a student at the prestigious Weimar Bauhaus in 1920. He began teaching in the preliminary course of the Department of Design in 1922, and was promoted to Professor in 1925, the year the Bauhaus moved to Dessau. In 1963 he published Interaction of Color which presented his theory that colors were governed by an internal and deceptive logic. "

Two demonstrations: (1) (2)

In addition to the modernism of Bauhaus, Albers relates to Gestalt notions of context, of figure and ground.

"In musical compositions, so long as we hear merely single tones, we do not hear music. Music depends on the recognition of the in-between of the tones, of their placing and of their spacing."

Dipping left & right hands into hot & warm water, then both hands into equal water - the sensation of hot & cold is somewhat relative; and color is also relative.

Here is an excellent summary of color context effects: http://facweb.cs.depaul.edu/sgrais/color_context.htm

Color schemes

I strongly recommend that you build a basic color palette before starting your work! Using a color palette is great way to work with color independently of other formal elements such as space and time. A color palette may be used throughout a work, or simply through different sections of a work. You might consider it akin to the orchestration, key, mode, etc.

Making a color scheme / color palette

Here are some elementary color scheme design principles (thanks to http://facweb.cs.depaul.edu/sgrais/ColorSchemes.htm and http://www.color-wheel-pro.com/color-schemes.html):

A number of well known heuristic methods exist for concocting color palettes:

One easy way to design a color scheme is to use black and white, plus a single "key color" or dominant color to highlight emphasized elements. A color key, or dominant color, can heighten psychological as well as composition impact.

Monochromatic hue schemes are derived from a single base color, and extended using its shades and tints. The monochromatic scheme is easy to manage, and always looks balanced and visually appealing. http://facweb.cs.depaul.edu/sgrais/monochromatic.htm

Analogous colors are any three colors which are side by side on a 12 part color wheel, such as yellow-green, yellow, and yellow-orange. Usually one of the three colors predominates. One color is used as a dominant color while others are used to enrich the scheme. The analogous scheme is similar to the monochromatic one, but offers more nuances.

Triadic schemes use three equally spaced hues on the wheel (thus RGB and CMY are both triadic). The triadic color scheme offers high contrast while retaining harmony. Choose one color to be used in larger amounts than others. If the colors look gaudy, try to subdue them.

Complementary colors are opposite on the wheel. Complementary pairs contrast because they share no common colors. Complementary colors can appear very exciting and seem to vibrate when placed side by side. This scheme looks best when you put a warm color against a cool color, for example, red versus green-blue. The complementary scheme is intrinsically high-contrast. The complementary color scheme offers stronger contrast than any other color scheme, and draws maximum attention. See also http://facweb.cs.depaul.edu/sgrais/color_complementary.htm

Double complementary (aka Tertiary) schemes use two complementary pairs. This scheme is hard to harmonize; if all four colors are used in equal amounts, the scheme may look unbalanced, so you should choose a color to be dominant or subdue the colors.

The split complementary scheme is a variation of the standard complementary scheme. It uses a color and the two colors adjacent to its complementary. This provides high contrast without the strong tension of the complementary scheme. The split complementary scheme offers more nuances than the complementary scheme while retaining strong visual contrast.

A chromatic gray is made from a mixture of color, rather than a simple blend of black and white.
The result is both subtle and vibrant. Earth colors, including raw sienna and burnt sienna, raw and burnt umber and yellow ochre, are made literally from pigments found in the soil. Generally warm in temperature, when used together they create a type of analogous harmony.

Disharmony avoids color harmony altogether for an intentionally disturbing yet beautiful images - analogous to dissonance.

Tools to generate palettes:

http://kuler.adobe.com/?sdid=LZMS - Kuler is a free color-mixing tool provided by Adobe with some helpful tools for composing palettes (including many of the heuristics above), and a huge database of user-designed color palettes already available. You can grab these colors from the website using the color picker in Flash or by noting the RGB values for Flash/Jitter etc.

http://wellstyled.com/tools/colorscheme2/index-en.html - Another similar tool, with some slightly different default options including color-blindness adjustments!

http://colormatch5k.com/ - This utility will help you select a matching 6-color palette. Define a single color that you like. Matching colors will be calculated. Click a color in the palette to promote it to the primary color.

ColorSchemer Studio is a professional color-matching application that will help you build beautiful color schemes quickly and easily! (not free): http://www.colorschemer.com/osx_info.php / http://www.colorschemer.com/studio_info.php

Color palettes in Flash

The Flash Color Mixer panel provides many means to modify colors. If you prefer to mix colors using the more natural HSB mode, choose HSB from the panel menu (indicated with the red arrow). Once you have a color you are happy with, you can add it to the set of color swatches using the Add Swatch option in the same menu. This way you can build up your color palette and have it always available in your file. Remember you can also save gradient colors and even bitmap fillls as color swatches.

The Color Swatches panel shows you all the colors already saved, including the default set. From the panel menu (again, indicated with this red arrow) you can load and save color sets, useful if you want to move them between several flash files.

 

Stealing color palettes

Also see: http://www.makezine.com/blog/archive/2007/05/how_to_improve_your_photo.html

I recently discovered an interesting and related technique. From the Color Swatches panel menu, select Clear Colors to remove all colors except black and white, then select Add Colors to load new color swatches from an external file, then find a GIF file of your choosing. All the colors used in the GIF file will now be loaded into your swatches. Finally, select Sort Colors to order them by hue. For example:

The GIF file: when imported leads to: