Skip to main content
Practice

RGB Color System

"RGB" stands for Red, Green, and Blue, which are the three primary colors that can be mixed to create a wide range of different colors.


What are RGB Colors?​

All colors in the RGB system are created by combining the three colors Red, Green, and Blue. Each color's brightness is represented by a number between 0 and 255.


Using RGB in CSS​

In CSS, the rgb() function is used to set RGB color values.

By placing the red (R), green (G), and blue (B) numerical values within the parentheses, you can create the desired color.


/* Red text */
p {
  color: rgb(255, 0, 0);
}

/* Green text */
h1 {
  color: rgb(0, 255, 0);
}

/* Blue text */
h2 {
  color: rgb(0, 0, 255);
}

Creating Various Colors​

You can create a wide range of colors by adjusting the values of red, green, and blue. For example, mixing equal amounts of red and blue produces purple.

/* Set text color to purple */
div {
  color: rgb(255, 0, 255);
}

Setting all three colors to the maximum value of 255 results in white, while setting them all to 0 results in black.

/* White text */
span {
  color: rgb(255, 255, 255);
}

/* Black text */
a {
  color: rgb(0, 0, 0);
}

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.