CSS Adding Color

Chapter 11 9 mins

Learning outcomes:

  1. Color formats in CSS
  2. Colornames, hexadecimal, rgb() and hsl()

Now that we've gotten a decent introduction to colors in general, we can move on to head over to discover how to actually add colors in CSS.

There are a handful of ways to assign color values to properties that require them such as color, background-color and so on.

The first one that we have in this the is color names.

Color names

You have already worked with CSS colors names in the previous chapters and so they aren't any new to you.

Including values like black, white, blue, gold and so on, color names are generally the first thing novice CSS developers are shown when introduced to CSS colors.

Well you can't expect beginners to grasp complex color notations at first glance - they need something simple to start with and this is just where color names can help. You need a black color? Simply write black. You need white? Just go on and write white. It is that easy, at least for these basic colors!

Not every color, that you can think of, exists in the predefined CSS color names table, however most of them usually do.

Let's see some of them:

ColorCSS ColornameResultColorCSS ColornameResult
The CSS colornames over here are given in lowercase, but in effect aren't obliged to be this way - they are case-insensitive. We can also write BLACK for black. However being consistent and conventional is always better and what good developers do!

This table shows only some of the number of CSS color names available to developers. The actual list goes up to 216 colors!

Now a frequent question many people ask is that do we need to remember these names for our projects?. The answer is clearly NO.

Although you could do it, but learning these names doesn't have much of a relevance in designing. Considering the fact that these days websites are built largely on code editors and IDEs, which provide users with features of selecting colors from a palette full of hues and adjust them to their taste - there is really no need to learn or even understand colors!

But if you do, then it's not a bad skill to have!

Now names for CSS colors are only limited to a small number of 216. In this modern era of technology, we can have over 16 million of different hues on screens and CSS comes with this capability too. But obviously color names aren't this capability - what else is it then?

It is hexadecimal, rgb() and hsl().


Hexadecimal is a color format following a three parameter syntax for red, green and blue in the given order.

It starts with a hash #, signifying hexadecimal code and has either 3 or 6 characters.

The characters can be anything from 0-9 a-f. Each character represents a certain amount of brightness for the red, green and blue colors (lit at the backends of the device screen).

0 is dark and f is bright.

Let's see all this working in real:

ColorHexadecimal codeResultColorHexadecimal codeResult
Black#000 (#000000)
White#fff (#ffffff)
Red#f00 (#ff0000)
Green#0f0 (#00ff00)
Blue#00f (#0000ff)
Yellow#ff0 (#ffff00)

Now consider the following code snippets:

p {color: #f00}

A paragraph with color: #f00

The rgb() function

The third color format in this list is the RGB (Red Green Blue) format. It operates exactly similar to hexadecimal except for the fact that the range for each of the subcolor values is 0-255.

0 is dark and 255 is bright.

In CSS we can use the rgb() function to define a color in terms of its RGB format. The function takes three parameters in the following order:

rgb(red, green, blue)

Each of the parameter can take a value within the range 0-255. Therefore rgb(0, 0, 0) which is the same as #000 represents black color. And similarly rgb(255, 255, 255) which is the same as #fff represents white color.

Consider the following examples:

p {color: rgb(255, 0, 0)}

A paragraph with color: rgb(255, 0, 0)

p {color: rgb(100, 100, 100)}

A paragraph with color: rgb(100, 100, 100)

Revising the fact again - you don't need to memorise any of these color values. Just remember the function and the format in case you ever come across it!

The hsl() function

The fourth and the last way to add color in CSS is using the hsl() function.

HSL stands for Hue Saturation Light. Hue chooses a vibrant color, saturation decreases / increases its vibrance and light finally adds whiteness to it. Again you don't need to understand, in great detail, the working of hsl().

Editors have literally made a lot of stuff easier!

It also takes three parameters, hsl(hue, saturation, lightness), but they behave differently than the parameters in the other color systems (rgb and hex).

  • hue specifies an angle on the color wheel for the starting, base color.
  • saturation specifies the saturation of the color, i.e. it's vibrance, which means how clean (or washed out) the color is. This is a percentage.
  • lightness specifies the darkness/lightness of the color. Again this is a percentage. 100% means completely white while 0% means completely black.

Consider the example below for the color red:

p {
   color: hsl(0, 100%, 50%)

A paragraph with color: rgb(255, 0, 0)

Red is where the color wheel begins, at 0 deg, hence, the first parameter. 100% saturation means that we desire the purest red color. 50% is used because we want to strike the perfect balance between dark and light.

And with this we conclude this chapter. Knowing what all these notations mean in general, is not that relevant and important at least in today's technologies but if you do know them then it won't hurt at all!

"I created Codeguage to save you from falling into the same learning conundrums that I fell into."

— Bilal Adnan, Founder of Codeguage