The BoosterPack RGB LED has three color components: red, green, and blue. As demonstrated in a previous project, if you only turn one color LED and keep the others off, you will see the color of the LED you turned on. However, if you turn on two color LEDs, then the result is a mixture of the two colors (e.g. red and blue produce magenta, red and green produce yellow, and blue and green produce cyan). Finally, turning on all three color LEDs produces white. Thus, you can produce seven different colors with the RGB LED, which is rather limiting considering that there’s an entire spectrum of colors. In fact, all colors of visible light can be created using red, green, and blue light. So how do we produce colors that are in between? We can mix different proportions of light colors.

For example, we can make a bright yellow using the red LED at 100% brightness and the green LED at 100% brightness. What if we wanted to produce a darker yellow? We could proportionally reduce the amount of red and green being used. Setting the red LED to 80% brightness and the green LED to 80% brightness will still produce yellow, but with a dimmer shade. Thus, we can use the LED dimming concept to not only get darker shades of red, blue, and green, but also darker shades of color mixtures.

As another example, suppose we wanted to produce a purple color. Purple is a mixture of red and blue, but as noted before, red and blue produce magenta. Reducing the amount of red light being mixed, though, creates a color that is closer to blue. So if we reduced the red LED to, say, 50% brightness and kept the blue LED at 100% brightness, the end result would be a shade of purple since there is more blue light being produced than red light (as opposed to an even amount of both).

This color mixing concept is the foundation for HTML color codes. These color codes are written in six-digit hexadecimal numbers, where the first two digits are red, the second two digits are green, and the last two are blue. #FFFFFF, for example, produces white since red, green, and blue are all at their maximum values. #DDDDDD produces a darker shade of white (gray) since the proportion of red, green, and blue is still even, but they are all at lower values than their maximum. To demonstrate the relation between the two types of color mixing, we can represent the dimmed yellow and purple colors from the previous examples as hex codes.

The dimmed yellow had 80% red, 80% green, and 0% blue. Since each color gets two digits of hexadecimal, then the maximum value used to represent each color concentration is 2^8 - 1 = 255. Thus, we can multiply 255 by the brightness level of each color in order to get a decimal value for the color concentrations. In this case, 255 * 0.8 = 204 and 255 * 0 = 0. So red and green have values of 204, and blue has a value of 0. Converting these numbers to hexadecimal gives us 204 = 0xCC and 0 = 0x00. So the color code is #CCCC00. For purple, we apply a similar process, but with 50% red, 0% green, and 100% blue, resulting in #7F00FF.