CSS Adding Color

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.

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:

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:

Now consider the following code snippets:

p {color: #f00}

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)}

p {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 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 but in the range of it takes a value between 0-255 for all three parameters- hue, saturation and light. However the way it functions is slightly different than rgl and hex.

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

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

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!