CSS Colors Tutorial

When it comes to making your UI standout, there’s nothing like choosing the right color pallette. With this tutorial you’ll learn how easy it is to assign colors to elements, fonts, and pretty much anything as you build your UI.

To add color, CSS has the color data type, which represents color in the standard Red, Green, Blue (RGB) format.

color Syntax

There are a couple of ways in which you can define colors with CSS:

• With keywords. They are typed as strings, like ‘red’, ‘white’, ‘yellow’ or hex numbers like #fff.
• With hexadecimal notation, for example #fff.
• Via rgb() or rgba() functional notations.
• Or using the HSL functions such as hsl() and hsla().

Using Keyword Identifiers

The easiest way to add a color to any element that needs it, is to use keyword attributes.

Please note that there are nuances as to the specific property you’ll use to add color, being a background, a text or an element. For our example we will use a good-old button.

<button class="color">Color Me</button>

With our button element we have two options to add color. Either via the background-color property or the color property. In this case the color property changes color of the text and background-color, that of the background. Let’s go ahead and select our button and then add color to our button!

Easy right?

rgba() and hsl() functions

So you can see how to use keywords to add color to specific color properties. You can refer to this keyword color cheatsheet to see all the options available. Although keyword colors give us a wide array of possible colors, it can be limited.

These keyword colors, or pretty much any other color, can be expressed also either as Hex RGB or RGB decimal. For example ‘black’ would be #000000 or 0,0,0 in decimal and so on. You can get more specific colors with these hex or decimal options. 

An easy way to add RGB decimal would be to use the rgb() function. The maximum value of each decimal is 255. Let’s change our keyword colors to show these two new options:

button.color {
    /* RGB and decimal */
    color: #fff;
    background-color: rgb(210,105,30);
}

Have you noticed that black has the same characters repeated? When it is the same character you can just type the first three like I did for white above. This can also be expressed as #ffffff.

Another option to add colors would be to use the hsl() function. HSL stands for hue, saturation, and lightness. Lightness represents a percentage from white (100%) to black (0%). Saturation is also a percentage but of the color of gray where 100% is ‘full’ grey color. Hue represents degrees (0 to 360) in the color wheel as RGB where 0 is red, 120 is green and 240 is blue. I know this sounds complicated 😅. 

Code editors such as Visual Studio provide a color picker you can play. Go ahead and type hsl() then hover and see the color picker pop up.

The left side you can manipulate the hue, and the two other bars saturation and lightness. Play with it and see what cool colors you can get. HSL is useful for shades, and we can manipulate with saturation and lightness. Some people prefer it because of their own particular needs.

Modifying Color Opacity

You might notice that both rgb and hsl functions can be expressed by either rgba() or hsla(). The ‘a’ stands for alpha but is pretty much the transparency / opacity where 0 is transparent and 1 is completely opaque.

By modifying opacity you can get even more refined with your colors. Let’s finish up our button color by modifying its opacity:

button.color {
    color: #fff;
    background-color: rgba(210,105,30, 0.7);
}

With opacity our text reads much better indeed!