CSS is a styling language, and the color – or the other properties which gets a color value – is one of its most basic features. Setting colors is general in any design.

Defining color in our stylesheet is not just needed for the color values. We use it for background, border, box-shadow, and text-shadow too. As I said the color is essential in every part of a design and the good news is that in CSS we can manage it more comfortable.

We take a long road from the predefined and hex color values. Today we can handle our colors in a more developer friendly way. We can use functions for declaration instead of the complicated – complicated to understand and calculate with, it is hard to get a darker shade from a specific color based on hex value – hexadecimal values, and we can use alpha channels to make semi-transparent. values

The better CSS color functions are similar like you find in the graphic designers because they work with RGB or HSL color too from the early ages of Photoshop. But it was a big deal in CSS when these were introduced. Before the RGBA and HSLA, we can’t make a color transparent. Today these functions have strong browser support.

Let’s see how many ways we can give a color value for our properties.

Predefined Values

There are 140 predefined color values which supported by the modern browsers. In the early days, this number was much lower and more useless because all of these was just harsh color like red and blue. Today there are finer ones, but mostly in a live environment, we use accurate colors. For me, these are useful when I’m making some prototyping. For the entire list check out HTML color codes.

color: lightcoral;
background-color: lightpink;

currentColor

The currentColor, not a generic one it is a variable which gets its value from the current scope (the color value is inherited). We wrote about it previously; for more info check out our article!

color: currentColor;

Hexadecimal Values

These are the traditional color values in web design like #FF0000. It works similar to RGB but one color value – from the red, green, blue – comes from two (pairs) unique hexadecimal number (0 – F).

The above example will give back the red color because the first two digit is FF (for the red) which tell that get all of the red you have and the last two pairs 00 (for the green) and 00 (for the blue) tells that no need for these colors (so don’t mix anything).

As you see, you can also work and make new colors from the code, but it is hard. Until you get the same values for a two-digit pair (like FF) there is no problem, but which color is #8A39F4? No problem, I don’t know too.

rgb() and rgba()

At this point, the color declaration starts to be a little bit better, but the regular RGB is not much different from the HEX values. It gets three value each for a basic color: red, green, blue. Instead of giving a hexadecimal double digit we have to give a value between 0 – 255. The classical red example will look the following:

color: rgb(255,0,0);

We can simplify the declaration by giving percentage value between 0% – 100% like rgb(100%, 0, 0). Using this way it is easier to imagine the end color. One disadvantage is that the graphics apps using the normal values.

background-color: rgb(100%, 0%, 0%);

By alone this is not so useful but using rgba() function we can achieve much more. The “a” at the end means alpha which is responsible for the transparency. If we have a base color, we can make it semi or fully transparent using the alpha channel.

color: rgba(255,0,0, 0.5);
background-color: rgba(100%, 0%, 0%, 0.5);

It is helpful when we work with overlays or want some text’s color to make more solid like rgba(0,0,0,0.8).

hsl() and hsla()

The HSL color declaration is the most developer-friendly way to give color values in our code. It stands for Hue, Saturation, and Lightness.

The Hue is your color from the color wheel; it is an angle from 0° to 360°. The saturation determines the color vivacity; it is a percentage value from 0% to 100%. The lightness defines – as you guessed – the darkness/light of the specific color; it is a percentage value from 0% to 100%, but the default is 50%.

color: hsl(0, 100%, 50%);

The hsla() does the same as rgba(), you can change the alpha channel value to make something transparent.

For using HSL, you need to understand the color wheel only (mostly the order of the base colors), and from that point, you can find smoothly new shades or complementary colors (add 180deg to the hue).

This article was tried to go from the worst to the best choices when it comes to color defining. If you use rgb() declaration – and understand it – you are all right, but using hsl() your systems and your work can be much more advanced, understandable and manageable.

If you didn’t use hsl() function for color declaration give it a try, it will worth it!