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 |
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.