Mixing Light-Colors

 ( HSB - Hue, Saturation, Brightness ) 

by Craig Rusbult, Ph.D.

 
1A — Varieties of Hues (RGB - additive for TV & computer) with varying brightness & saturation
1B — Varieties of More Hues (CMYK - subtractive for printing) with varying brightness & saturation
1C — Other Hues and
2 — Splitting out the White is a useful way to interpret saturation when mixing light-colors.
 

 
        1A — Hues (red, green, blue) with variations of Brightness and Saturation
        In the diagram below, in the left half of the top row you can see the brightness increasing from 0% to 100%, which produces "varieties 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 "varieties of blue" row.

 
Other TERMS (for saturation, brightness) and COLOR SYSTEMS (HSB and also HSL, HSV, HSI):
    • In the second 6 cells in each row above, moving from left to right the colors become less saturated (more unsaturated) because more white light is mixed with the hue, and in common language we can call the less saturated colors pale shades of the hues (red, blue, or green) or pastel shades.
    • brightness (a common term, especially for light-emitting objects) is also called lightness (a common term, especially for light-reflecting objects).  And when we look at the first 6 cells in the rows for R, G, and B, we can think “the brightness (or lightness) increases moving from left to right” or “the darkness decreases moving from left to right” although I prefer thinking in terms of brightness (and so do most other people) or “moving from right to left the brightness decreases and the darkness increases.”  The 3-factor system for describing colors can be called "hue, saturation, and brightness" (HSB) or "hue, saturation, and lightness" (HSL).
    • Wikipedia describes 3 related color systems: HSL, HSV (= HSB), and HSI.  But it's different in a Color Glossary from SAP Design Guild which has a sub-section about "HSL, HSV, HSB" (within a section about Color Space) that treats all three as synonyms and uses "L" for luminance, saying "Hue, Saturation, Luminance (also known as Hue, Saturation, Value or Hue, Saturation, Brightness): A system for describing the physical perception of color, in terms of tint (hue, color tone), perceived narrowness of the spectrum (saturation, chroma), and luminance (brightness, value). Hue determines the position on the color wheel or color circle, Saturation is the purity of the color, and Luminance the range of lightness to darkness of the color."  Later, I'll look at these systems more closely, to understand their similarities and differences.

 
        1B — Shades of Hues: Magenta, Yellow, and Cyan
        In the tables above and below, the left and right sides show increasing brightness (from 0% to 100%) followed by decreasing saturation (from 100% to 0%) but the tables above and below use a different set of three primary colors:
        The diagram above shows some varieties of three primary hues — red, green, 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 are explained in the "Color Vision" and "RGB & CMYK" and "Color Perception" parts of another page. }
        The diagram below shows some "varieties" of another three primary hues — magenta, yellow, cyan, MYC — which our society uses for mixing PIGMENTS, for subtractive mixing.   { The subtractive primaries are made from equal amounts of the additive primaries: equal amounts of red and blue produce magenta, red and yellow produce yellow, green and blue make cyan.  Printers use 4 ink colors: cyan magenta yellow black, in their CMYK-system. }

 
        1C — Many Hues (plus varieties produced by differences in brightness-and-saturation)
        You have seen 6 hues in Sections 1A (red, green, blue - R G B) and 1B (magenta, yellow, cyan - M Y C) but in reality there are many other hues.  Modern computer systems typically use 256 levels of brightness, varying from 0 to 255, to produce millions of colors (256 x 256 x 256 = 16,777,216) that have a wide range of variations in hue, saturation, and brightness.  But in real life we see more than 256 levels of brightness, and the colors we see (that we perceive by physiological reception-and-interpretation in our eyes-and-brain) are produced by light that includes many different hues, not just those of pure red, green, and blue, as in RGB computer screens.  You can see a wide variety of colors in a cone of HSB-colors and color circle;  and Wikipedia's page about HSL and HSV shows several representations of the color space possibilities.
 

 
        2 — 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 by the 3-column "splitting out the white" diagram in the middle — as being 10 units of light:  6 white, 1 red, and 3 blue;  or 6 white, plus 4 blueish-purple (made from 1 red and 3 blue, which is more "blue-ish" than a basic purple (*) made from 2 blue and 2 red);  or we can call it 60% white and 40% blueish-purple that is produced by 30% blue and 10% red.   {* what we commonly call purple is actually magenta, as explained in Part 1B }   /   Or you could think of it as as 40% white (in the bottom two rows) plus some blueish-purple made by mixing blue and red in a 3-to-1 ratio.

        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 }
 

 
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