Mixing Light-Colors

 ( HSB - Hue, Saturation, Brightness ) 

by Craig Rusbult, PhD

    People can see many colors of light.  When we're thinking about the colors we see, it's useful to interpret the many different colors as being different combinations of Colors, as different combinations of Red and Green and Blue.
    When the light we see is a mixture that contains equal amounts of all three Colors (R, G, B), we see this combination as White.
    But if only two Colors are mixed, they form a new Color, as when Red+Blue forms Purple, or Green+Blue forms Aqua, or Red+Green forms Yellow.
    When all 3 Colors are mixed, but their amounts are not equal, part of the mixture (varying from 0.01% to 99.99%) will form White, and the “leftover light” will form a Non-White Color that combines with the White to form a pale version (a pastel) of the Non-White Color.
    For example, Red+White forms a Pale Red, Green+White is Pale Green, and Blue+White is Pale Blue.  And if there are two leftover colors, the result can be a Pale Purple, Pale Aqua, or Pale Yellow.

    These are the basic principles.  The rest of this page is detailed explanations of the basic principles – explained by using concepts of hue, brightness, saturation – along with illustrations of the different colors that are produced by different mixtures of light that is Red and Green and Blue.  I'll explain the principles, and show the colors, in four sections:
    1A — varieties of Hues (RGB - additive light for displays of TV or computer) with varying brightness & saturation,
    1B — varieties of Hues (CMYK - subtractive pigments for printing) with varying brightness & saturation,
    1C — and Other Hues made by mixing different colors of light (R, G, B) or pigments (C, M, Y, K), and
    2 — Splitting out the White is a useful way to think intuitively about saturation when mixing colors of light (R, G, B) to make “pastel” 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 of red light 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 light” gets mixed in (first, 20% of the three hues produce white, then the white is produced from 40%, 60%,...) until there is all-white.
        The second & third rows show the same changes for Green and Blue;  you see varying brightness and saturation in the hues of green and blue.
        The bottom part of the table shows light-percents for each of the hues (red, green, blue) in the “varieties of blue” row.  (i.e. in the third row, in the blue-row that's below the red-row and green-row)

 
        In the second 6 cells of each row above (in the right half of each row), moving from left to right the colors become less saturated (more unsaturated) because more white light (W) is mixed with the pure hue-color, and in common language we can call the less-saturated colors pale shades of the pure hues (red, blue, or green) or pastel shades.
        When we look at the first 6 cells in each color-row we can think “the brightness increases moving from left to right” or “the darkness decreases moving from left to right,” although it's more common to think about brightness, and in fact this term is used in the color-describing system of HSB, which defines a color by its Hue, Saturation, Brightness.

 
        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 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 arise from combining equal amounts of the additive primaries;  adding equal amounts of red light and blue light produce magenta light;  similarly, red and yellow produce yellow light, green and blue make cyan light.  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 3 hues in Sections 1A (red, green, blue - R G B) and 3 more hues in 1B (magenta, yellow, cyan - M Y C) but in reality there are many other hues.  Modern computer systems typically use 256 levels of brightness (or more), 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 (beyond computer screens) 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 ways to representat the color space possibilities.
 

 
        2 — Splitting Out the White
        A useful way to interpret saturation when combining additive 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% max-brightness of pure green (0-40-0 for R-G-B), and 100% max-brightness of pure blue (0-0-100) — is shown at the left side of the table below.  Together, the R-G-B mixture is 60-40-100, with each number representing a percent of maximum brightness, i.e. the colors are 60% of max, 40% of max, 100% of max;  or (if I define each maximum 100% brightness as being 100 units) it's 60 units of red, 40 units green, 100 units blue.
        The table has three parts.  The left part shows the units of each pure color: 60 red, 40 green, 100 blue.  In the middle part, this mixture is interpreted as being some white light – produced from the first 40 units of each color – plus the two “leftover” hues of red and blue, with differing brightness;  the leftovers (that survive after splitting out the white) are 20 units of red, and 60 units of blue.  The overall result – one of the many “purple” colors – is shown in the table's far-right part.
        This blend of colors can be interpreted mathematically — as shown in the central “splitting out the white” part of the table — as being 200 units of light that is 120 white (in the bottom two rows) plus 20 red and 60 blue.  Or we can think of it as 120 white plus 80 purple, i.e. it's 80 of the purple that is made from 20 red and 60 blue (with a ratio of 20-to-60, or 1-to-3), which is more blue-ish than the purple we would get from 40 red and 40 blue (with an equal ratio of 2-to-2).
        In this table, each block is 20 units of color, is 20% of the color's maximum brightness.  The far-left part shows the R-G-B for each pure color;  the middle section shows my “white plus leftover-colors” interpretation, aka “splitting out the white”;  the far-right part shows the color produced by this R-G-B mixture of 60-40-100.

other options:  Instead of 60-40-100 (→ 120 white, 20 red, 60 blue,  = 120 white + 80 purple) with a 1-to-3 shade of purple (          ) we could make a less-saturated “more pastel” shade of this 1-to-3 purple by using 80-70-100 (→ 210 white, 10 red, 30 blue,  = 210 white + 40 purple) (          ), or using 90-85-100 (→ 255 white, 5 red, 15 blue,  = 255 white + 20 purple) (          ).    /    Or instead of the full-brightness blue (at 100% of its maximum brightness, what I'm calling 100 units), we could use 80% blue (80 units), and one kind of 1-to-3 purple could be 60-50-80 (→ 150 white, 10 red, 30 blue,  = 150 white + 40 purple,           ) with the purple becoming darker (compared with 210 white + 40 purple,           ) and less vibrantly colored (compared with the similarly-dark 120 white + 80 purple,           ).     {what is saturation?}
 

 
Appendix:

Above in Part 2 you see some results of "white plus leftover Red and Blue" and below (included so you can see another set of colors) are the results of mixing the same white (each block has "40 R + 40 G + 40 B" to make "120 white") with different amounts of "leftover" Green and/or Blue.

The “total brightness” ranges from 120 units ( = 120 white + 0 leftover in "0-0-0") to 240 units ( = 120 white + 120 leftovers in "0-60-60").
 

 
        a distinction:  a Color Tutorial (defining & illustrating the HSB-concepts of Hue, Saturation, Brightness) says "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."
 
        Specifying Colors in a Web-Page:  The table in Part 2 has "60-40-100" purple.  When this colors is written in hexadecimal format for HTML-code for a web-page, this color (with R-G-B of 60-40-100) is written as 9966FF because "99" is 60% of Red's maximum intensity, "66" is 40% of Green's maximum, and "FF" is 100% of Blue's maximum.     {an easy-to-use converter between percent & hexadecimal}
 

Copyright © 2004-2022 by Craig Rusbult
all rights reserved