Attribution: By SharkD (Own work) [GFDL (http://www.gnu.org/copyleft/fdl.html) or CC BY-SA 4.0-3.0-2.5-2.0-1.0 (http://creativecommons.org/licenses/by-sa/4.0-3.0-2.5-2.0-1.0)], via Wikimedia Commons

Websites are displayed on monitors, and this means they rely on light to present color. You may be more used to creating colors by mixing paints. Physical media like paints, inks, or other art supplies are added to a white paper or canvas, blocking out certain parts of the light spectrum so a specific color will be seen. This is known as subtractive colors, because they are made by removing light. Well, monitors and screens essentially do the opposite. If a monitor doesn’t display any light, it appears black. But as light is added, different colors display. So this process uses additive colors.

Screens use the colors red, green and blue as their primary colors to make all other colors. That’s why the color system for digital displays is called RGB (Red, Green, Blue). Increasing or decreasing the amount of each of these colors will yield all of the other colors you may need. For the sake of reference points, here is a list of combinations and what they produce. Referring to the 3-D model provided may help you visualize what is happening in these combinations.

• No light results in black.
• 100% of all three colors yields white.
• 100% of red and blue yields magenta.
• 100% of blue and green yields cyan.
• 100% of red and green yields yellow.

RGB colors are referenced in web design in one of three ways. We will first cover each of these methods, and then we’ll move on to applying color to elements via CSS properties.