🎨 Understanding the CSS rgb model (Visualized)
Tags: css, webdev, todayilearned, tutorial
Published: 2022-07-04 09:23:58

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ibafx101gxanyyxej701.png)

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

![the rgb function](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yz97atf03e9cwm2tay8e.png)

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

```HTML
<div class="markers">
      <div class="strip one">
      </div>
      <div class="strip two">
      </div>
      <div class="strip three">
      </div>
</div>
```
```CSS
.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 

```CSS
.one {
  background-color: rgb(255, 0, 0);
}
```
```CSS
.two {
  background-color: rgb(0, 255, 0);
}
```
```CSS
.three {
  background-color: rgb(0, 0, 255);
}
```
**Output**

![strips of the different background colors](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p29zr4v1yjkuh9j8k3ur.png)

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 

```CSS
.two {
  background-color: rgb(0, 127, 0);
}
```
**Output**
![pic of a natural shade of green](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lpnm0quvkk7o1yvq4n5u.png)

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.

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

And the total absence of all 3 give black
```CSS
.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 

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

###2. **Cyan**

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

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

###3. **Magenta**
Magenta is formed from the combination of pure blue and pure red

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

**Output**

![pic of secondary colors](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/em0pntt16946kjhrhw0h.png)

---

## 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


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

![pic of orange](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gixe0iy1pln89tc59qsq.png)

###2. Spring Green

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

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

![pic of spring green strip](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nbvn1e1vct4hawu1z9zo.png)


###3. Violet 

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

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

![pic of violet strip](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/glelfek67kc9wejvbpfb.png)

###4. Chartreuse green

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

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

**Output**

![pic of chartreuse green strip](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wq6b2lddvny7hsoq3b9s.png)


###5. Azure 

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

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

**Output**

![pic of azure strip](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ptyl4r4essc9e7r8ka2h.png)

###6. Rose 

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

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

**Output**
  
![pic of rose strip](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ocsqdc5f4k9quw2d2tt4.png)


Thanks for reading!

Now, can you remember the combination for chartreuse green? (be honest :sweat_smile: )

---
header pic: [Katie Rainbow](https://unsplash.com/@katierainbow)