Mixing Light-Colors
 (hue, saturation, brightness) 

by Craig Rusbult, Ph.D.

    1. Splitting Out the White
    A useful way to interpret saturation when mixing light-colors is based on the principle that when equal amounts of three primary hues (red, blue, green) are mixed together, it produces white.  For example, a mixing of three light-colors — 60% pure red (i.e., red at 60% of its maximum brightness with no green or blue, so it's "60, 0, 0" for Red, Green, Blue) plus 40% pure green ("0-40-0" for R-G-B), and 100% pure blue — is shown at the left side of the diagram below.
    As shown in the middle three columns, this can be interpreted as some white light (produced from the first 40% of each color) plus two "leftover" hues with differing brightness: 20% red and 60% blue.  The resulting "pastel" color, a type of pastel bluish-purple, is shown at the right.  Mathematically, this can be interpreted (as shown in "splitting out the white" in the middle) as being 6 units of white plus 4 units of blueish-purple color (1 unit of red and 3 units of blue), with fractions of 6/10 white, 1/10 red, and 3/10 blue.

    a distinction: "As it is described here, brightness refers only to relative values within a source that we are looking at (for example, a display screen or printed document).  The actual luminance (of a light source) or reflectance (of an object) is a different issue — these values are measured with devices such as photographic light meters."  { quoted from a Color Tutorial which defines and illustrates the concepts of hue, brightness, and saturation }
 

 
    2a. Shades of Hues: Red, Green, and Blue
    In the diagram below, in the left half of the top row you can see the brightness increasing from 0% to 100%, which produces "shades of red" beginning with black (no red, and also no green or blue) that is minimum "brightness of red" and then adding more and more red (20%, then 40%,...) until the middle box, which is 100% red at maximum brightness.  Continuing rightward, the color saturation decreases from 100% to 0% as more and more "white" gets mixed in (first 20% of the three hues produce white, then 40%, 60%,...) until there is all-white.
    In the second and third rows, you see varying brightness and saturation in shades of green and blue, and then the light-percents (for each of the hues: red, green, and blue) in the "shades of blue" row.

 
    2b. Shades of Hues: Magenta, Yellow, and Cyan
    In the diagrams above and below, the left and right sides show increasing brightness (from 0% to 100%) and decreasing saturation (from 100% to 0%), but with a different set of three primary colors.
    The diagram above shows the "shades" of three primary hues (red, green, and blue: RGB) that our society has selected for mixing LIGHT in which there is additive mixing.   { Yes, as implied by saying "our society has selected," these three primary hues are choices we have made, but there are good reasons for these choices, related to the physiology of human vision, which is explained in the "Color Vision" and "RGB & CMYK" and "Color Perception" parts of another page. }
    The diagram below shows some "shades" of the three primary hues — magenta, yellow, cyan (M, Y, C) — that our society uses for mixing PIGMENTS, for subtractive mixing.   { note: The subtractive primaries are made from equal amounts of the additive primaries: equal amounts of red and blue produce magenta, red and yellow make yellow, green and blue make cyan. }

Appendix:

Here are the results of various mixtures of R, G, and B with "40% RGB --> white" plus "leftover green and blue".

The "total brightness" varies from 140 units ( = 120 white + 20 leftover) to 240 units ( = 120 white + 120 leftover).

Copyright © 2004 by Craig Rusbult
all rights reserved