RGB
RED, GREEN, and BLUE light sources are represented by an RGB color value.
RGB Value
Using the following formula, a color in CSS can be expressed as an RGB value:
rgb(red, green, blue)
The color intensity is defined by each of the three parameters (red, green, and blue) and ranges from 0 to 255.
For instance, because red has been set to its maximum value (255) and the remaining colors to 0, rgb(255, 0, 0) appears as red.
Set all color arguments to 0 to display black, as in rgb(0, 0, 0).
Set all color parameters to 255, as in rgb(255, 255, 255), to display white.
Try blending the RGB values below as an experiment:
rgba(182, 0, 71, 0.5)
RED
GREEN
BLUE
ALPHA
Example
Shades of gray are often defined using equal values for all the 3 light sources:
Example
RGBA Value
RGBA color values are an extension of RGB color values that include an alpha channel to indicate a color’s opacity.
A color value in RGBA is defined as follows:
rgba(red, green, blue, alpha)
A number between 0.0 (complete transparency) and 1.0 (complete transparency) is the alpha parameter:
Try combining the RGBA values below as an experiment:
rgba(255, 99, 71, 0.5)
RED
GREEN
BLUE
ALPHA
Example
RGB
color value
red
green
blue
CSS
rgb()
color intensity
0-255
black
white
gray
RGBA
alpha channel
opacity
HTML
HTML5
HTML tutorials
Learn HTML
Free HTML tutorials
HTML Example
HTML Explained
CSS RGB: Unlocking the Power of Color
In the world of CSS, the RGB (Red, Green, Blue) color model is a fundamental tool for designers and developers. This color system allows you to precisely define and manipulate the hues, shades, and tones that bring your digital creations to life.
The RGB color model works by specifying the intensity of red, green, and blue light. Each color can have a value between 0 and 255, with 0 representing the absence of that color and 255 representing the maximum intensity. By combining these three primary colors in different proportions, you can generate a vast array of colors.
For example, the color white is represented by the RGB value (255, 255, 255), as it contains the maximum intensity of all three primary colors. Conversely, the color black is represented by (0, 0, 0), as it lacks any primary color intensity. Shades of gray can be created by setting equal values for red, green, and blue.
The RGB color model can be used in CSS through the `rgb()` function. This function takes three comma-separated values, each ranging from 0 to 255, to define the desired color. For instance, `rgb(255, 0, 0)` would produce the color red.
Additionally, CSS offers the `rgba()` function, which extends the RGB model by including an alpha channel. This fourth value, ranging from 0 to 1, determines the opacity or transparency of the color. An alpha value of 0 represents complete transparency, while a value of 1 represents full opacity.
By mastering the RGB color system in CSS, you’ll have the power to create visually stunning and cohesive designs, ensuring your digital projects stand out with the perfect blend of colors.
