DEV Community

Cover image for 🎨 Understanding the CSS rgb model (Visualized)

🎨 Understanding the CSS rgb model (Visualized)

The RGB model is an additive color model where the colors red, green and blue can be added together in different intensities to form a wide array of colors. The additive colors start with black, then adds red, green and blue.

color spectrum

With the rgb function, the arguments are used to produce color

the rgb function

Each argument, red/green/blue, can range from 0 to 255. O means there is 0% of that color and 255 means there is 100% of that color.

For example: We'll use 3 div elements to demonstrate the use of the rgb model

<div class="markers">
      <div class="strip one">
      </div>
      <div class="strip two">
      </div>
      <div class="strip three">
      </div>
</div>
Enter fullscreen mode Exit fullscreen mode
.markers {
  padding: 10px 0;
}

.strip {
  width: 200px;
  height: 25px;
  margin: 10px auto;
}
Enter fullscreen mode Exit fullscreen mode

Now using the rgb concept explained above, we could set the background colors of strip 1, 2 and 3 to the different primary colors red, green, and blue respectively

.one {
  background-color: rgb(255, 0, 0);
}
Enter fullscreen mode Exit fullscreen mode
.two {
  background-color: rgb(0, 255, 0);
}
Enter fullscreen mode Exit fullscreen mode
.three {
  background-color: rgb(0, 0, 255);
}
Enter fullscreen mode Exit fullscreen mode

Output

strips of the different background colors

The intensities of each color can be varied between 0 and 255 to get different shades. For example, to get a more natural color for green (the second strip), it's intensity could be reduced to half way between 0 and 255

.two {
  background-color: rgb(0, 127, 0);
}
Enter fullscreen mode Exit fullscreen mode

Output
pic of a natural shade of green

Increasing the value of the color increases its brightness.

Red, blue and green are primary colors, so when they are added together in the highest intensities (255), they form white.

.white {
  background-color: rgb(255, 255, 255);
}
Enter fullscreen mode Exit fullscreen mode

And the total absence of all 3 give black

.black {
  background-color: rgb(0, 0, 0);
}
Enter fullscreen mode Exit fullscreen mode

Secondary colors

Secondary colors are formed from the combination of two primary colors. There are 3 secondary colors

1. Yellow

Yellow is formed from the combination of pure red and pure green

.one {
  background-color: rgb(255,255,0);
}
Enter fullscreen mode Exit fullscreen mode

2. Cyan

Cyan is formed from the combination of pure green and pure blue

.two {
  background-color: rgb(0, 255, 255);
}
Enter fullscreen mode Exit fullscreen mode

3. Magenta

Magenta is formed from the combination of pure blue and pure red

.three {
  background-color: rgb(255, 0, 255);
}
Enter fullscreen mode Exit fullscreen mode

Output

pic of secondary colors


Tertiary Colors

Tertiary colors are formed from a combination of a primary color and a nearby secondary color.There are six tertiary colors.

1. Orange

Orange is formed from the combination of pure red and yellow and falls between the two on the color wheel. Set red at max (255) and green to 127

.one {
  background-color: rgb(255, 127, 0);
}
Enter fullscreen mode Exit fullscreen mode

Output

pic of orange

2. Spring Green

Spring green is formed from the combination of pure green and cyan. Set green to 255 and blue to 127

.one {
  background-color: rgb(0, 255, 127);
}
Enter fullscreen mode Exit fullscreen mode

Output

pic of spring green strip

3. Violet

Violet is formed from the combination of pure blue and magenta. Set blue to 255 and red to 127

.one {
  background-color: rgb(127, 0, 255);
}
Enter fullscreen mode Exit fullscreen mode

Output

pic of violet strip

4. Chartreuse green

Formed from the combination of pure green and yellow. Set green to 255 and red to 127

.one {
  background-color: rgb(127, 255, 0);
}
Enter fullscreen mode Exit fullscreen mode

Output

pic of chartreuse green strip

5. Azure

Formed from the combination of pure blue and cyan. Set blue to 255 and green to 127

.one {
  background-color: rgb(0, 127, 255);
}
Enter fullscreen mode Exit fullscreen mode

Output

pic of azure strip

6. Rose

Formed from the combination of pure red and magenta. Set red to 255 and blue to 127

.one {
  background-color: rgb(255, 0, 127);
}
Enter fullscreen mode Exit fullscreen mode

Output

pic of rose strip

Thanks for reading!

Now, can you remember the combination for chartreuse green? (be honest πŸ˜… )


header pic: Katie Rainbow

Discussion (9)

Collapse
lukeshiru profile image
Luke Shiru • Edited on

Is a little less readable, but you can actually achieve the same things just using good ol' hex. Hex values have the format #RRGGBB (2 hexadecimal numbers for red, two for green and two for blue) or #RGB (one for each). You just need to keep in mind that the hex values go from 00 to ff instead of from 0 to 255, and if you have a color that has duplicated values for each channel, you can just write them once, so instead of #AABBCC you can just write #ABC.

Having this information, you can think of 255 as FF (or F with the short format), 0 is just 00 (or 0 with the short format), and 128 as 80 (because is not 88, it can't be used with the short format).

Knowing all this, you can do the same colors in the post like this:

  1. Yellow: #ff0 (it can also be #ffff00)
  2. Cyan: #0ff (it can also be #00ffff)
  3. Magenta: #f0f (it can also be #ff00ff)
  4. Orange: #ff8000
  5. Spring Green: #00ff80
  6. Violet: #8000ff
  7. Chartreuse green: #80ff00
  8. Azure: #0080ff
  9. Rose: #ff0080

Cheers!

Collapse
babib profile image
ππšπ›π’ ✨ Author

Thanks for the input! I was write a blog explaining the use of hexcode in css. This is superb!

Collapse
atulcodex profile image
Atul Prajapati

Well explained πŸ™πŸ˜Œ

Collapse
babib profile image
ππšπ›π’ ✨ Author

Glad you liked it

Collapse
atulcodex profile image
Atul Prajapati

☺️

Collapse
wjplatformer profile image
Wj

Nice explanation! We can also view RGB as mixing paint on a palette IRL.

Collapse
babib profile image
ππšπ›π’ ✨ Author

Exactly!

Collapse
tilakjain123 profile image
Tilak Jain

Nice explanation.

Collapse
babib profile image
ππšπ›π’ ✨ Author

Thanks!