DEV Community

Cover image for 🎨 Understanding the CSS rgb model (Visualized)
𝐁𝐚𝐛𝐢 ✨
𝐁𝐚𝐛𝐢 ✨

Posted on

🎨 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

Top comments (8)

Collapse
 
atulcodex profile image
🚩 Atul Prajapati 🇮🇳

Well explained 🙏😌

Collapse
 
babib profile image
𝐁𝐚𝐛𝐢 ✨

Glad you liked it

Collapse
 
atulcodex profile image
🚩 Atul Prajapati 🇮🇳

☺️

Collapse
 
babib profile image
𝐁𝐚𝐛𝐢 ✨

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

Collapse
 
wjplatformer profile image
Wj

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

Collapse
 
babib profile image
𝐁𝐚𝐛𝐢 ✨

Exactly!

Collapse
 
tilakjain123 profile image
Tilak Jain

Nice explanation.

Collapse
 
babib profile image
𝐁𝐚𝐛𝐢 ✨

Thanks!