Color in composition

Color is the element viewers respond to fastest and most emotionally. A splash of red pulls the eye across a gray street; a frame bathed in teal and orange feels cinematic; a palette of pale pastels feels gentle and nostalgic. VIS-110 explains the physics and perception of color: wavelengths, color spaces, white balance and color management. This lesson treats color as a compositional tool: how it creates contrast and focal points, how it carries visual weight and depth, how color schemes unify an image, how color sets mood and meaning, and how to design with color so that images and graphics work for viewers with color vision deficiencies.

Describing color: hue, saturation and value

Artists and designers describe any color by three properties:

• Hue: the color family, such as red, yellow, green, blue, named by its position on the color wheel.
• Saturation (also called chroma or intensity): how pure or vivid the color is, from gray to fully saturated.
• Value (lightness): how light or dark it is, independent of hue (Lesson 1 showed that value contrast does most of the work of separating subject from background).

A useful insight is that these three properties act somewhat independently in composition. Two colors of different hue but the same value merge into one shape when converted to black and white, and can be hard to distinguish for some viewers; colors of very different value always separate. Saturation controls how loudly a color calls for attention.

Color contrast

The painter and teacher Johannes Itten, at the Bauhaus in the 1920s, described seven kinds of color contrast that remain a useful checklist:

In photography and film, the most useful are value, warm-cool, complementary and saturation contrast. A subject in a saturated color against a muted background becomes an immediate focal point (Lesson 9), which is why a red coat or a yellow raincoat appears in so many street photographs and films. Complementary pairs, such as orange skin tones against a teal or blue background, separate subjects strongly and are the basis of the "teal and orange" look common in contemporary films and advertising, popular partly because skin tones fall in the orange range and the complement pushes them forward.

Color weight and balance

Colors carry visual weight (Lesson 5). In general, warm colors weigh more than cool, saturated more than muted, and, against a light background, dark more than light. A small area of intense red can balance a large area of pale blue. Goethe proposed proportions for balancing colors by their apparent brightness, such as yellow to violet in about 1:3 and red to green 1:1; the exact ratios matter less than the principle that strong colors need less area to hold their own. A common design guideline, the 60-30-10 rule, uses a dominant color for about 60% of a layout, a secondary color for 30%, and an accent for 10%, giving a clear hierarchy.

Color also affects apparent position in depth. Warm, saturated colors seem to advance toward the viewer, while cool, desaturated colors recede. Landscape painters exploited this with aerial perspective: distant hills are painted bluer, lighter and less saturated because the atmosphere scatters light, and the effect makes them read as far away (Lesson 7). A photographer can strengthen depth by placing warm subjects in front of cool, hazy backgrounds and weaken it by doing the reverse.

Color schemes

Color schemes, or harmonies, are combinations that tend to look coherent:

• Monochromatic: tints and shades of one hue. Calm, unified and elegant, but risks monotony; value contrast does the separating.
• Analogous: three or four neighboring hues, such as yellow, orange and red in an autumn forest, or blues and greens in a seascape. Harmonious and natural; one hue usually dominates.
• Complementary: two opposite hues. Vibrant and high-contrast; usually one dominates and the other is an accent, as equal areas of saturated complements can clash.
• Split-complementary: a hue and the two neighbors of its complement, such as blue with yellow-orange and red-orange. Strong contrast with less tension than a direct complement.
• Triadic: three hues equally spaced on the wheel, such as red, yellow and blue. Lively and balanced; often used with one dominant and two accents.

A photographer cannot always choose the colors of a scene, but can choose what to include and exclude, when to shoot, and what the subject wears. Filmmakers go further: production designers, costume designers and colorists plan a film's palette, often assigning colors to characters, places or emotional states, and changing the palette as the story develops.

Color, mood and meaning

Colors carry associations that come partly from nature and partly from culture:

Beyond individual colors, the overall palette sets mood. Warm, saturated palettes feel energetic and inviting; cool palettes feel calm, clinical or melancholy; desaturated palettes feel serious, gritty or nostalgic; high-key pastel palettes feel light and gentle. Light itself has color (VIS-110): the warm light of early morning and late afternoon, the "golden hour", feels romantic and nostalgic, while the blue light just after sunset, the "blue hour", feels quiet and mysterious. Choosing when to shoot is often choosing a palette.

Color grading as composition

In film, video and much photography, color is adjusted after capture in color correction and grading. Correction fixes technical problems, making white balance and exposure consistent between shots. Grading is creative: it shapes the palette to direct attention and set mood. Compositional uses of grading include:

• Separating subject and background with complementary colors, such as warming skin and cooling shadows.
• Using power windows (masks) to brighten or saturate the subject slightly and darken the edges of the frame, guiding the eye inward like a vignette.
• Reducing saturation in distracting background colors, such as a bright green sign behind a speaker.
• Keeping a consistent palette across a sequence so that the story, not color changes, carries attention (Lesson 11).

Grading is most effective when it reinforces choices made earlier in production design, costume and lighting. Heavy grading cannot rescue a scene whose colors fight the composition.

Palette plans like this are often summarized in a color script, a strip of small frames or swatches showing the dominant colors of each scene in order. Animation studios use color scripts to plan entire films, and live-action productions use mood boards and reference stills in the same way, so that every department works toward the same visual arc.

Color accessibility

About 8% of men and 0.5% of women of Northern European ancestry have some form of color vision deficiency, most commonly reduced sensitivity to red or green. For them, red and green of similar value can look alike, and color-coded information, such as a red and green chart, a map legend, or a "go" button distinguished only by hue, can be unreadable. Good practice:

• Never rely on hue alone to carry meaning; add value contrast, labels, patterns or shapes.
• Check designs in grayscale: if important elements merge, increase their value contrast.
• Use color-blind-safe palettes for charts and diagrams, for example blue and orange rather than red and green.
• For text, meet contrast guidelines: the Web Content Accessibility Guidelines (WCAG) require a luminance contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, calculated as in Lesson 1.