...

/

Making sense of Colors in CSS

Making sense of Colors in CSS

Colors make up beautiful designs - in most cases. There's not going to be a lot of color theory in this lesson, but you will learn to manipulate colors with CSS. You'll also learn the color units in CSS. Pretty much all the important CSS color stuff.

We'll cover the following...

We will begin this lesson with a quick example. Take a look at the code below:

Press + to interact
body {
background-color: red;
}

The code above shows how we have handled colors from the start of the course. We have used names such as red, blue, green etc.

These color names are generally referred to as color names and there are about 140 of these names - all valid. You can take a look at all of them here

Before jumping off to check out these colors, don’t try to memorize the colors. Just take a look at them 👌

I know 140 color names feel like a lot, even then, web designers and developers need more! Let’s take a look at the other ways colors may be defined in CSS.



1. RGB values

Take a look at the image below. What does it remind you of?

widget

For me, it does remind me of when I was a kid. When I toyed with colored pencils. ✏️

The important thing to note is the MIX of colors. 3 primary colors (red, green, ...