Chapter 11: CSS Colors in RGB and HSL

A Complete Frontend Developer Textbook for Beginners (2023 Edition)

This is the textbook version of Lesson 11 of 100 from the Udemy video course: A Complete Frontend Developer Course for Beginners

← Chapter 10: Positioning Elements

← Table of Contents

Overview

This lesson covers the following HTML tags, CSS topics, and JavaScript commands for the first time:

HTML

None.

CSS

1. background-color
2. rgb()
3. hsl()

JS

None.

This lesson begins with this Codepen. Code along with me to increase retention!

Lecture

In previous lessons, we have been using the background property to set the color.

body {
 width: 75vw;
 height: 75vh;
 border: solid red;
 background: lightgreen;
}

To be more precise, the background property is actually a shorthand that combines many related properties together (which we will cover in depth in the next lesson).

Basically, there are two types of backgrounds:

1. background-color
2. background-image

First, let’s look at background-color in greater detail (background-image will be covered in the next lesson).

To set only the background color, we can just write:

body {
 width: 75vw;
 height: 75vh;
 border: solid red;
 background-color: lightgreen;
}

And it still works!

Unlike any other HTML elements, the body element is special because even though we set the width and height to be only 75 percent of the viewport (the red border), the green background-color covers all of the viewport:

This is the NOT the case for other HTML elements.

For example, let’s give the main element a background-color of green:

main {
 width: 50vw;
 height: 50vh;
 background-color: green;
}

As you can see, it exactly covers the dimensions of the main element (50vw x 50vh):

The finished Codepen:

RGB Color System

There are a few different ways to specify the color that we want. So far, we have used familiar keywords such as green and lightgreen.

body {
 background-color: lightgreen;
}

main {
 background-color: green;
}

What if we want a more nuanced color between green and lightgreen?

How would we do that?

We can use a color system called RGB:

main {
 background-color: rgb();
}

Which stands for Red, Green, and Blue.

R = Red
G = Green
B = Blue

In nature, these are the three primary colors of light, from which we can produce any other colors:

Primary Colors: Red + Green + Blue => Rainbow

To get any particular color, we simply vary the amount of Red, Green, and Blue.

In fact, each pixel in a computer screen is made up of these 3 primary colors.

Pixel: Red + Green + Blue => Any Color

And depending on how much each one is lighted up, each pixel can produce any color.

In the RGB color system, each value can range from 0 all the way to 255.

RGB: 0 -> 255

For example, if we want a perfect red, we would make:

• Red = 255
• Green = 0
• Blue = 0

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

If we want a perfect green, we would make:

• Red = 0
• Green = 255
• Blue = 0

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

Similarly, if we want a perfect blue, we would make:

• Red = 0
• Green = 0
• Blue = 255

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

What is lightgreen in RGB?

It is:

main {
 background-color: rgb(144, 238, 144);
}

What happens if we set 0 to everything?

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

Since all primary colors are turned off, we get pure black.

What happens if we max everything instead?

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

We get pure white.

With RGB, it is also possible to control the transparency of a color.

By default, it is 100% representing no transparency.

main {
 background-color: rgb(255, 255, 255, 100%);
}

What happens if we make the transparency 50%?

main {
 background-color: rgb(255, 255, 255, 50%);
}

As you can see, the parent’s background-color of lightgreen seeps through a little.

What happens if we make the color completely transparent at 0%?

main {
 background-color: rgb(255, 255, 255, 0%);
}

The parent’s background-color comes through completely.

Transparency:

0%   ->  100%
full ->  none

It is more precise to use rgba() to include the transparency (alpha channel).

The finished Codepen:

HEX Shorthand

To make RGB shorter so we can type less, it is possible to count with base 16 instead of base 10.

Base 10:

R: 0 -> 255
G: 0 -> 255
B: 0 -> 255

Including 0, each of the three primary colors has 256 possibilities.

0 -> 255 = 256 possibilities 

When we count from from 0 to 9, we get base 10 or the decimal system:

Base 10: 0 -> 9 = 10 possibilities

Using this system, we need at least 3 digits for each primary color:

Decimal System:

R: 3 digits
G: 3 digits
B: 3 digits

Therefore in total, we need at least 9 digits to represent any color:

Total: 3 + 3 + 3 = 9 digits

For example:

rgb(255, 255, 255) => 9 digits

If we instead count from 0 to 9, then a to f, we get base 16 or the hexadecimal system.

Base 16: 0 -> 9 and a -> f = 16 possibilities

Using this system, we only need 2 digits to account for all 256 possibilities:

16 x 16 = 256 possibilities 

This means we only need 6 digits total to represent any color:

Hexadecimal System:

R: 2 digits
G: 2 digits
B: 2 digits

Let’s do some examples!

To get a perfect red, we write:

• ff for red (which is 255 in the decimal system)
• 00 for green (which is 0 in the decimal system)
• 00 for blue (which is 0 in the decimal system)

main {
 background-color: ff0000;
}

To let CSS know that we’re using the hexadecimal system, we prefix it with the pound symbol:

main {
 background-color: #ff0000;
}

To get a perfect blue, we write #:

• 00 for red
• 00 for green
• ff for blue

main {
 background-color: #0000ff;
}

To get pure black, we write # and 00 for everything:

main {
 background-color: #000000;
}

To get pure white, we write # and ff for everything:

main {
 background-color: #ffffff;
}

We can also add transparency.

To make a color fully transparent, add 00 at the end:

main {
 background-color: #ffffff00;
}

To make it 50% transparent, add 80 at the end:

main {
 background-color: #ffffff80;
}

To make it have no transparency, add ff at the end:

main {
 background-color: #ffffffff;
}

Finally, there’s even a shorter shorthand we can use!

If both digits are identical for each value, we can just drop one of them:

R: ff => f
G: ff => f
B: ff => f
A: ff => f

A represents the Alpha channel which is the formal name for transparency.

A = Alpha channel = transparency

In practice, we may be more intuitive to think of the alpha channel as the opacity instead.

A = opacity

Transparency and opacity are opposite terms that describe the ability to see through an object. Greater transparency means it is easier to see through something. Greater opacity means it is harder to see through it.

Low opacity (A = 0%) => High transparency
High opacity (A = 100%) => Low transparency

In other words, when something is opaque, light cannot pass through it easily. Hence, it is not transparent.

The shorthand:

main {
 background-color: #ffff;
}

The finished Codepen:

HSL Color System

Using the RGB color system, to change the color of a pixel on a computer screen, we simply vary the amount of the 3 primary colors of light.

Red + Green + Blue = Any Color

On a color wheel:

They are located at:

• Red = 0 degrees
• Green = 120 degrees
• Blue = 240 degrees

For coders and engineers, this color system is simple and intuitive.

Engineers: RGB Color System

Designers and painters, on the other hand, prefer another system that uses a different set of primary colors. For them, colors are produced by mixing:

Designers: Yellow + Cyan + Magenta

On the color wheel, they are the complementary colors of light located at:

• Yellow = 60 degrees
• Cyan = 180 degrees
• Magenta = 300 degrees

Using this system, to create different shades of the same Hue, painters can simply vary the amount of white paint being added. This amount of white paint is referred to as the Lightness factor.

Lightness = White

Computer printers also use this system of colors. However, instead of using white to create different shades, printers use black instead. The amount of black ink being added is referred to as the Saturation factor.

Saturation = Black

Let’s do some examples!

To tell CSS that we are using the Hue-Saturation-Lightness system of colors, we write:

main {
 background-color: hsl();
}

Then, to get perfect yellow for example, we write:

• 60 degrees for the yellow Hue on the color wheel
• 100% for the Saturation which means do not add any black “ink”
• 50% for the Lightness

main {
 background-color: hsl(60deg, 100%, 50%);
}

Why 50%?

Below 50%:

main {
 background-color: hsl(60deg, 100%, 40%);
}

Means white “paint” will be removed.

Above 50%:

main {
 background-color: hsl(60deg, 100%, 60%);
}

Means white “paint” will be added.

At 50%:

main {
 background-color: hsl(60deg, 100%, 50%);
}

Means to do neither.

Lightness: 

0% ->         50%       -> 100%
remove white  no white  add white

If we add black “ink” to the maximum by setting the Saturation to 0%:

main {
 background-color: hsl(60deg, 0%, 50%);
}

The color will turn gray.

Saturation:

0%  ->  100%
full    none

Like RGB, we can also add an Alpha channel (transparency factor).

To make a color 50% transparent, we simply add 50% at the end like usual:

main {
 background-color: hsl(60deg, 0%, 50%, 50%);
}

It is more precise to use hsla() to include the alpha channel.

The finished Codepen:

Summary

In this lesson, we studied the background-color in more detail.

In particular, we explored three different ways to specify colors.

If we want to use colors that are common, we can specify keywords such as brown:

background-color: brown;

For the complete list of keywords, check out this MDN article:

However, if we want to use colors that are not common, there are two systems of colors we can utilize:

1. RGB Color System
2. HSL Color System

RGB Color System

The RGB color system mirrors the way nature produces colors by varying the amount of the three primary colors of light:

1. Red
2. Green
3. Blue

For example, a pixel on a computer screen uses this system to produce color.

Pixel = Red + Green + Blue

In fact, the cone cells in our eyes also use this system to enable us to see colors.

Cone Cell = Red + Green + Blue

HSL Color System

On the other hand, the HSL color system uses the three complementary colors of light:

1. Yellow
2. Cyan
3. Magenta

With this system, shades can easily be created by adding white or black to the Hue.

For example, painters use this system to easily create shades by adding white or the Lightness factor.

Hue + White => Shades

Computer printers also use this system to easily create shades by adding black or the Saturation factor.

Hue + Black => Shades

Painters don’t use black because it’s difficult to mix. Printers don’t use white because the paper is already white.

RGB Syntax

To use the RGB color system, we can write it as a function:

rgb(R, G, B, A)

Or, as a hexadecimal:

#RRGGBBAA

In the functional notation, Red, Green, and Blue can be a number from 0 to 255, or a percentage.

R: 0 -> 255 or %
G: 0 -> 255 or %
B: 0 -< 255 or %

The transparency or Alpha can be a number between 0 and 1, or a percentage.

A: 0 -> 1 or %

We can separate these values with a common:

rgb(R, G, B, A)

Or, just a space:

rgb(R G B A)

In the hexadecimal notation, we use hexadecimal characters:

• 0 through 9
• a through f

If all four values and their two digits are the same, we can drop one:

#RRGGBBAA => #RGBA

Again, it is more precise to use rgba() to include the alpha channel.

HSL Syntax

To use the HSL color system, we specify:

• Hue
• Saturation
• Lightness
• Alpha

We can separate them using a comma:

hsl(H, S, L, A)

Or, just a space:

hsl(H S L A)

The Hue is expressed as an angle, the Saturation and Lightness are expressed as percentages. The Alpha can be expressed as a number between 0 to 1, or a percentage.

H: angle
S: %
L: %
A: 0 -> 1 or %

In both color systems, the Alpha channel is optional and the default is 1 which is no transparency.

Again, it is more precise to use hsla() to include the alpha channel.

Concept Quiz

Take my Programming Concept Quiz to check your understanding! For every correct choice, you will earn SW Coins which you can redeem for coupons towards the purchase of any of my Udemy courses!

Sample Quiz Questions for Lesson 11:

Question 1:

Which CSS property CANNOT set the background-color?

1. background
2. color
3. background-color

Question 2:

Setting a background-color on the body element will always cover the entire viewport.

1. True
2. False

Question 3:

What is NOT a primary color?

1. red
2. green
3. yellow
4. blue

Question 4:

Which will produce pure red?

1. rgb(0, 255, 0)
2. rgb(255, 0, 0)
3. rgb(0, 0, 255)

Question 5:

Which will produce pure green?

1. rgb(100%, 0%, 0%)
2. rgb(0%, 100%, 0%)
3. rgb(0%, 0%, 100%)

Question 6:

Which will produce pure blue?

1. rgb(0 0 255)
2. rgb(255 0 0)
3. rgb(0 255 0)

Question 7:

Which will produce pure white?

1. rgb(100% 100% 100%)
2. rgb(0 0 0)

Question 8:

Which will produce pure black?

1. rgb(255 255 255)
2. rgb(0 0 0)

Question 9:

Which will produce perfect transparency?

1. rgb(0 0 0 100%)
2. rgb(0 0 0 0)

Question 10:

Hexadecimal notation requires a # prefix.

1. True
2. False

Question 11:

Which is NOT a hexadecimal character?

1. 0
2. 9
3. a
4. d
5. f
6. g
7. 5

Question 12:

Which will NOT produce pure red?

1. #ff0000
2. #f00
3. #ff0

Question 13:

Which will NOT produce pure green?

1. #0f0
2. #0ff
3. #00ff00

Question 14:

Which will NOT produce pure blue?

1. #f0f
2. #0000ff
3. #00f

Question 15:

Which will NOT produce pure white?

1. #ffffff
2. #fff
3. #000

Question 16:

Which will NOT produce pure black?

1. #fff
2. #000
3. #000000

Question 17:

Which will NOT produce perfect transparency?

1. #0000
2. #0000000
3. #000f

Question 18:

Which is NOT a complementary color?

1. yellow
2. green
3. cyan
4. magenta

Question 19:

Yellow is located at what degree?

1. 60
2. 180
3. 300

Question 20:

Cyan is located at what degree?

1. 60
2. 180
3. 300

Question 21:

Magenta is located at what degree?

1. 60
2. 180
3. 300

Question 22:

What “paint” color does the Lightness factor add or remove?

1. white
2. black

Question 23:

What “ink” color does the Saturation factor add?

1. white
2. black

Question 24:

What Lightness value will NOT add any white?

1. 0%
2. 50%
3. 100%

Question 25:

What Saturation value will NOT add any black?

1. 0%
2. 50%
3. 100%

Question 26:

Which is NOT a complementary color?

1. hsl(60deg 100% 50%)
2. hsl(180deg 100% 50%)
3. hsl(300deg 100% 100%)
4. hsl(300deg 100% 50%)

Question 27:

Which color system uses primary colors?

1. RGB
2. HSL

Question 28:

Which color system uses complementary colors?

1. RGB
2. HSL

Question 29:

Which Alpha value will NOT produce perfect opacity (no transparency)?

1. 1
2. 100%
3. 0

→ Programming Concept Quiz for Chapter 11

Coding Exercises

Check out my Interactive Coding Exercises to put to practice what you have learned! There, you will also find interactive hints to help you understand each line of code. Likewise, for every correct solution, you will earn SW Coins which you can redeem for coupons towards the purchase of any of my Udemy courses!

→ Interactive Coding Exercises for Chapter 11

Syntax Flashcards

Review what you have learned by playing my Syntax Flashcard Game! These flashcards are designed to help you commit to memory all the new code syntaxes you learned in this lesson. Likewise, for every correct answer, you will earn SW Coins which you can redeem for coupons towards the purchase of any of my Udemy courses!

→ Syntax Flashcard Game for Chapter 11

Next Steps

Congrats on completing Unit 2: Lesson 6 of 13! 🎉

Unit 1: 100% Completed
Unit 2: 46% Completed
Unit 3: 0% Completed
Unit 4: 0% Completed
Unit 5: 0% Completed
Bonus Unit 6: 0% Completed
Bonus Unit 7: 0% Completed

Overall Progress: 11% Completed

→ Join Remote Frontend Cohort Program

Next Lesson

In this lesson, we formally introduced the CSS background property and focused on the background-color. In the next lesson, we will continue our discussion of the background property by focusing on the background-image. This will complete our understanding of the background property as well as enable us to create some really fancy gradient effects in Lesson 13!

→ Chapter 12: CSS Background

← Table of Contents

When you use my referral link above 👆 to become a Medium member, all proceeds will be donated towards the construction of the Silicon Wat Campus for children in Ukraine and Cambodia ❤️