An RGB color value denotes the intensity of RED, GREEN, and BLUE light sources.
An RGBA color value adds an Alpha channel in RGB to manage opacity.
RGB Color Values
HTML colors can be defined using an RGB value with the following CSS code format:
color: rgb(red, green, blue);Each parameter (red, green, and blue) determines the intensity of the color with a value ranging from 0 to 255.
For instance, rgb(255, 0, 0) appears as red since red is set to its maximum value (255), while the other colors (green and blue) are set to 0.
Similarly, rgb(0, 0, 255) appears as blue since blue is set to its maximum value (255), while the other colors (red and green) are set to 0.
If you set all color parameters to 0, like rgb(0,0,0), it will display as black.
To display white, set all color parameters to 255, like: rgb(255, 255, 255).
Note: There are 256 x 256 x 256 = 16777216 possible colors!
RGBA Color Values
An RGBA color value adds an Alpha channel in RGB, which specifies the opacity level for a color.
An RGBA color value is defined using the following format:
color: rgba(red, green, blue, alpha);The alpha parameter ranges from 0.0 (fully transparent) to 1.0 (completely opaque):
The below CSS code will show the paragraph element in red color with 50% opacity.
p {
color: rgba(255, 0, 0, 0.5);
}The below code will show the paragraph element with a blue background with 50% opacity.
p {
background-color: rgba(0, 0, 255, 0.5)
}RGBA values are particularly useful in creating text overlays with transparent background above images and other elements in web pages.
For example, you can use the below code to create an overlay effect shown in the image below, where a text container is placed inside an image container.
.image-container {
background: url(image.png) no-repeat;
}
.text-container {
background: rgba(0,0,0,0.7);
}
Please check below options for the links to our previous or next tutorial.