Search⌘ K
AI Features

Making sense of Colors in CSS

Explore the fundamentals of color in CSS by understanding the use of named colors, RGB, RGBA for transparency, and HEX values. This lesson equips you with practical knowledge to choose and apply colors in your web design projects confidently without needing to memorize complex codes.

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

NAME_
CSS
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, and blue) mixed together to produce various other colors. ...