When you think of creating different colors, you probably think of mixing paints. Physical media like paints, inks, or other art supplies are added to a white paper or canvas. These media block out certain parts of the light spectrum so that specific colors can be seen. These are known as subtractive colors since the colors are created by removing light. Digital content is the opposite and relies on light to present color. If a monitor doesn't display any light, it appears black. But as light is added, different colors are displayed. These are known as additive colors.
Similar to print media, digital screens use the colors red, green, and blue to make all other colors. That's why the color system for digital displays is called RGB (Red, Green, Blue). Red, green, and blue are what's known as primary colors. They are the foundation for all known colors we see today. Increasing or decreasing the amount of each of these colors will yield any colors you may need. Below is a list of basic combinations and what colors they produce. You can refer to the accompanying 3-D model to 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. In this lesson, we will cover each of these methods, and then we'll move on to applying color to elements via CSS properties.
