🎨 Understanding the CSS rgb mannequin (Visualized)

The RGB mannequin is an additive shade mannequin the place the colours crimson, inexperienced and blue could be added collectively in several intensities to type a wide selection of colours. The additive colours begin with black, then provides crimson, inexperienced and blue.

With the rgb operate, the arguments are used to supply shade

Every argument, crimson/inexperienced/blue, can vary from 0 to 255. O means there may be 0% of that shade and 255 means there may be 100% of that shade.

For instance: We’ll use 3 div parts to show using the rgb mannequin

<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;
  top: 25px;
  margin: 10px auto;
}

Now utilizing the rgb idea defined above, we might set the background colours of strip 1, 2 and three to the completely different major colours crimson, inexperienced, 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 every shade could be various between 0 and 255 to get completely different shades. For instance, to get a extra pure shade for inexperienced (the second strip), it is depth could possibly be diminished to half means between 0 and 255

.two {
  background-color: rgb(0, 127, 0);
}

Output

Growing the worth of the colour will increase its brightness.

Purple, blue and inexperienced are major colours, so when they’re added collectively within the highest intensities (255), they type white.

.white {
  background-color: rgb(255, 255, 255);
}

And the full absence of all 3 give black

.black {
  background-color: rgb(0, 0, 0);
}

Secondary colours

Secondary colours are shaped from the mixture of two major colours. There are 3 secondary colours

1. Yellow

Yellow is shaped from the mixture of pure crimson and pure inexperienced

.one {
  background-color: rgb(255,255,0);
}

2. Cyan

Cyan is shaped from the mixture of pure inexperienced and pure blue

.two {
  background-color: rgb(0, 255, 255);
}

3. Magenta

Magenta is shaped from the mixture of pure blue and pure crimson

.three {
  background-color: rgb(255, 0, 255);
}

Output

Tertiary Colours

Tertiary colours are shaped from a mixture of a major shade and a close-by secondary shade.There are six tertiary colours.

1. Orange

Orange is shaped from the mixture of pure crimson and yellow and falls between the 2 on the colour wheel. Set crimson at max (255) and inexperienced to 127

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

Output

2. Spring Inexperienced

Spring inexperienced is shaped from the mixture of pure inexperienced and cyan. Set inexperienced to 255 and blue to 127

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

Output

3. Violet

Violet is shaped from the mixture of pure blue and magenta. Set blue to 255 and crimson to 127

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

Output

4. Chartreuse inexperienced

Shaped from the mixture of pure inexperienced and yellow. Set inexperienced to 255 and crimson to 127

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

Output

5. Azure

Shaped from the mixture of pure blue and cyan. Set blue to 255 and inexperienced to 127

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

Output

6. Rose

Shaped from the mixture of pure crimson and magenta. Set crimson to 255 and blue to 127

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

Output

Thanks for studying!

Now, are you able to keep in mind the mixture for chartreuse inexperienced? (be sincere 😅 )

header pic: Katie Rainbow