The RGB color code is a technique for representing colors in computer graphics. Here, the basic primary colors, Red, Blue, and Green, are added together in various ways to get other colors on the digital display screen. Designers use these combinations to create colors you might have seen on these screens.
They are most often used for the computer monitor color representation by taking wavelengths of these primary colors and making variations to get other colors. Here, let us learn what RGB color is and how to use it while designing a website or application on a digital screen.
What is RGB Color?
RGB here is made of three basic primary colors, including Red, Blue, and Green. It is an additive color model where these primary basic colors are added together in different variations to create a broad array of colors.
The main objective of the RGB color is to deliver color variations on the digital screen.
This is the representation of the RGB color combinations using a simple Venn diagram. You can see the presence of other colors when these basic colors mix together. The wavelengths of these three colors are used to produce different colors on the digital screens.
- The color coordinate system of RGB color uses three basic primary colors, namely Red, Green, and Blue.
- The intensity value ranges from 0 to 1. Here, 0 is the lowest and 1 is the highest.
- The color representation method using the three primary colors is an additive process.
- Each color in the RGB system ranges from 0 to 255 using 8 bits each, from 0 to 23 for each color.
- There are a million color combinations, approximately counting to 16,777,216, and even more possible with RGB color combinations.
Read More: Types Of CSS Colors In Web Development
Why Is RGB color used?
RGB color is based on the real life image creation by human eyes. It matches the human vision where our eyes are also sensitive to these three colors i,e. Red, Green, and Blue. Every color we see around us is made using a mix of these three colors. This color arrangement is inspired by the human vision process, especially for digital screens.
The RGB color palette can create color combinations suitable for a variety of digital screens, including LCD monitors, LED screens, LCD monitors, OLED monitors, phone screens, and more.
How Does RGB Work?
The RGB color model is an additive color process where the lights from the primary colors i,e. Red, green, and blue are combined to create an array of different color shades. Each color channel in RGB ranges from 0 (dark) to 255 (maximum brightness).
Each of the R, G, and B channels uses 8-bit color, meaning 256 possible values per color, having intensity from 0 to 255. This makes the total possible color combination, with each having 256 possible values, as
| 256 x 256 x 256 = 16,777,216 colors |
This is why you might have heard a salesman talk about how this color screen can display about 16.7 million colors. However, every digital screen can do so. Check some of the common RGB values along with their output.
| RGB Color Value | Output |
| (255, 0, 0) | Pure Red |
| (0, 255, 0) | Pure Green |
| (0, 0, 255) | Pure Blue |
| (255, 255, 0) | Yellow |
| (255, 255, 255) | White |
| (0, 0, 0) | Black |
When all three colors are mixed together with the lowest intensity, we get the black color, and when it is done with maximum intensity i,e. 255 we get white color.
Remember in childhood, how we used to get white color with a disc consisting of various color combinations of red, green, and blue. Whenever we used to spin the disc fastly, we used to get a white color.
How to Use RGB Colors With HTML?
You can easily use the RGB color format with the HTML defining the CSS (Cascading Style Sheet) to get the color of your choice.
- Pick your RGB color values i,e. Integers ranging from 0 to 250. You have to put it in place of a, b, and c in rgb (a, b, c).
- Now you can use this in either inline CSS or external CSS files. For example, let us define the body of a webpage with a background color of red. Your entire background image will convert to red.
| .box {
background-color: rgb(255, 0, 0); } |
- You can even define custom text colors using the RGB color format. Let us define a red color scheme for the paragraph element using the custom inline CSS styling.
| <p style=”color:rgb(255, 0, 0)”>
Welcome to PW Skills – Learn, Grow, and Build Your Career! </p> |
- You can also define the color scheme in the <style> tag under the <head> tag in an HTML document.
- You can use the RGB color format in an external CSS file to define the color scheme of blocks or elements like paragraphs, headings, containers, and more.
In your web development projects, you can use the RGB color combination to get colors of your choice.
Example of RGB Color With HTML & CSS
Let us give you a real experience of how you can use RGB color in your HTML document using CSS styling.
HTML
| <!DOCTYPE html>
<html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>PW Skills RGB Example</title> <link rel=”stylesheet” href=”style.css”> </head> <body> <div class=”card”> <h2>PW Skills – Web Development</h2> <p>Learn the fundamentals of HTML, CSS, and JavaScript with industry-level projects.</p> </div> </body> </html> |
CSS
| .card {
background-color: rgb(34, 139, 230); /* Blue background */ color: rgb(255, 255, 255); /* White text */ padding: 20px; width: 300px; border-radius: 10px; font-family: Arial, sans-serif; margin: 50px auto; box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2); } .card h2 { margin-bottom: 10px; } .card p { font-size: 14px; } |
Output
 |
What Is RGBA?
The full form of RGBA contains Red, Green, Blue, and Alpha, which is a simple extension of the RGB color model used in CSS. The first three values define the color, while the alpha value controls the transparency of that color.
The alpha channel ranges from 0 to 1, where 0 means fully transparent and 1 means fully opaque. The values between 0 and 1 will give you different levels of transparency. RGBA is commonly used for overlays, shadows, and elements in digital elements, where you need a color that blends smoothly with the background.
Let us make a simple change in the above example we took. Let us change the value of the background-color to “rgba(0, 128, 255, 0.5)” and then compare the transparency. You will notice the effect in the image below.
| .card {
background-color: rgba(0, 128, 255, 0.5); /* Blue background */ color: rgb(255, 255, 255); /* White text */ padding: 20px; width: 300px; border-radius: 10px; font-family: Arial, sans-serif; margin: 50px auto; box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2); } .card h2 { margin-bottom: 10px; } .card p { font-size: 14px; } |
Output
 |
Compare both the examples above and you will see the transparency affect taking place in the live result.
Different Color Combinations Using RGB Color Variations
Check some of the frequently used color combinations you can try with RGB colors to get the desired color.
| Color Name | RGB Value |
| Black | rgb(0, 0, 0) |
| White | rgb(255, 255, 255) |
| Red | rgb(255, 0, 0) |
| Green | rgb(0, 255, 0) |
| Blue | rgb(0, 0, 255) |
| Yellow | rgb(255, 255, 0) |
| Cyan / Aqua | rgb(0, 255, 255) |
| Magenta / Fuchsia | rgb(255, 0, 255) |
| Gray | rgb(128, 128, 128) |
| Light Gray | rgb(211, 211, 211) |
| Dark Gray | rgb(64, 64, 64) |
| Orange | rgb(255, 165, 0) |
| Pink | rgb(255, 192, 203) |
| Hot Pink | rgb(255, 105, 180) |
| Purple | rgb(128, 0, 128) |
| Violet | rgb(238, 130, 238) |
| Indigo | rgb(75, 0, 130) |
| Brown | rgb(165, 42, 42) |
| Chocolate Brown | rgb(210, 105, 30) |
| Gold | rgb(255, 215, 0) |
| Lime | rgb(0, 255, 0) |
| Olive | rgb(128, 128, 0) |
| Teal | rgb(0, 128, 128) |
| Navy | rgb(0, 0, 128) |
| Coral | rgb(255, 127, 80) |
| Tomato | rgb(255, 99, 71) |
| Salmon | rgb(250, 128, 114) |
| Sky Blue | rgb(135, 206, 235) |
| Royal Blue | rgb(65, 105, 225) |
| Forest Green | rgb(34, 139, 34) |
Learn UI UX With PW Skills
Become a master of design with PW Skills UI UX Design Course, learning user-centric principles, modern tools, and design methodologies. This is a 6-month course duration where you will get to learn from interactive course tutorials, real-world projects, get career assistance, and much more.
Perks of UI UX Course With PW Skills
- You will get to learn from dedicated mentors with the latest industry oriented curriculum.
- For the flexibility of students, we offer weekend live sessions.
- Students can strengthen their skills with practice exercises, assignments, and projects.
- Work on real world projects to get a hold of the concepts and real-world elements.
- You can clear your doubts easily through our live doubt resolution sessions. You will also get email support from our side.
- We will be providing you with career guidance and interview preparation sessions throughout the course.
- Learn advanced tools like Khroma, Figma, Uizard, Botpress, Figma, and more.
- Get a certificate of completion from PW Skills to help you gain more exposure in the industry with your skills and in-hand experience.
RGB Color FAQs
Q1. What is the RGB color format?
Ans: The RGB color scheme is an additive color property that stands for Red, Green, and Blue.
Q2. What is the RGB code for white?
Ans: You have to keep each value or R, G, and B, as 0 (lowest) intensity to get the white color.
Q3. Why is the RGB color model used?
Ans: The RGB model is an additive process where the three primary colors mix in different variations of wavelengths to produce other colors.
Q4. What is RGBA?
Ans: RGBA is an extension of RGB where the last element is alpha, used to control the transparency of the resulting color element. When you keep the value 0, it gives full transparency, but for 1, it is fully opaque.
