RGB (Red, Green, Blue) is an additive color model where red, green, and blue light are added together in various proportions to produce a broad array of colors. In web development, RGB values range from 0 to 255 for each channel.
How RGB Works
The RGB color model is based on the theory of trichromatic color vision, which explains how the human eye perceives color through the stimulation of three types of photoreceptor cells, or cones, in the retina. These three types of cones are sensitive to different wavelengths of light that roughly correspond to red, green, and blue.
In digital displays, each pixel consists of three light-emitting components: one red, one green, and one blue. By varying the intensity of each component, a wide range of colors can be produced:
- When all three components are set to their maximum value (255), the result is white light.
- When all three components are set to their minimum value (0), no light is emitted, resulting in black.
- Equal values of all three components create various shades of gray.
- Different combinations create all other colors in the visible spectrum.
RGB in Web Development
In web development, RGB colors can be specified in several ways:
Functional Notation
color: rgb(255, 0, 0); /* Pure red */
color: rgb(0, 255, 0); /* Pure green */
color: rgb(0, 0, 255); /* Pure blue */
color: rgb(255, 255, 255); /* White */
color: rgb(0, 0, 0); /* Black */Percentage Notation
color: rgb(100%, 0%, 0%); /* Pure red */
color: rgb(0%, 100%, 0%); /* Pure green */
color: rgb(0%, 0%, 100%); /* Pure blue */RGBA Notation (with Alpha/Transparency)
color: rgba(255, 0, 0, 0.5); /* Semi-transparent red */
color: rgba(0, 0, 255, 0.75); /* 75% opaque blue */Advantages of the RGB Color Model
- Direct mapping to display hardware: RGB directly corresponds to how digital displays work.
- Wide color gamut: RGB can represent a vast range of colors.
- Intuitive for digital work: The model aligns well with digital image manipulation and web development.
- Standardized: RGB is universally supported across all digital platforms.
Limitations of RGB
- Device-dependent: The exact appearance of RGB colors can vary between different displays.
- Not intuitive for color selection: It can be difficult to predict what color will result from specific RGB values.
- Not directly applicable to print: Print media uses the CMYK color model instead.
Converting Between RGB and Other Color Models
RGB values can be converted to and from other color models like HEX, HSL, and CMYK. Our color conversion tools make these transformations simple: