🎨 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.

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);
}

Output

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