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.
With the rgb function, the arguments are used to produce color
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>
.markers {
padding: 10px 0;
}
.strip {
width: 200px;
height: 25px;
margin: 10px auto;
}
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);
}
.two {
background-color: rgb(0, 255, 0);
}
.three {
background-color: rgb(0, 0, 255);
}
Output
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);
}
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);
}
And the total absence of all 3 give black
.black {
background-color: rgb(0, 0, 0);
}
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);
}
2. Cyan
Cyan is formed from the combination of pure green and pure blue
.two {
background-color: rgb(0, 255, 255);
}
3. Magenta
Magenta is formed from the combination of pure blue and pure red
.three {
background-color: rgb(255, 0, 255);
}
Output
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);
}
Output
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);
}
Output
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);
}
Output
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);
}
Output
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);
}
Output
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);
}
Output
Thanks for reading!
Now, can you remember the combination for chartreuse green? (be honest 😅 )
header pic: Katie Rainbow
Top comments (8)
Well explained 🙏😌
Glad you liked it
☺️
Thanks for the input! I was write a blog explaining the use of hexcode in css. This is superb!
Nice explanation! We can also view RGB as mixing paint on a palette IRL.
Exactly!
Nice explanation.
Thanks!