Why CSS HSL Colors are Better!

medium.com medium.com3 years ago in #Dev Love459

With the Power of CSS VariablesIntroduction One of the most fundamental concepts in CSS is colors. It’s a basic concept everywhere, but in this article, we’ll be focusing on its representation when targeting browsers. On the web, every color is a combination of 3 colors: red, green, and blue. It’s as if every pixel on the screen consists of three light-bulbs: green, blue, and red. The most common method for representing colors in CSS is the “Hexadecimal colors” method, and the next common method is the RGB/RGBA one. The two approaches differ in the way they represent the values of those colors. pixels view from close look The hexadecimal colors method— each of the three colors is represented using a double-digit HEX number, and a ‘#’ sign precedes the three figures. Each of the double-digit numbers defines the intensity of its respective “light-bulb”. The first double-digit number is for the pixel’s red light-bulb , the second number is for the green light-bulb, and the last one is for the blue light-bulb. We can also add double-digits number at the end, that will define the color’s opacity. As you probably know, the hexadecimal base means that a digit’s value can be between 0 and 15, with the values of 10–15 represented by the letters A to F. In each of the double-digit numbers, the lowest number, 00, means that the bulb is shut off, and the highest number, FF, is the strongest light of this specific color. There are 256 intensity levels for each of these three colors. With those three light-bulbs that make up every pixel of color, we can create any color displayed on our screen. The two optional digits that define the color’s opacity are also a double-digit hexadecimal number. The highest value, FF, means full opacity, and the lowest value, 00, means total transparency. The numbers in between make the element semi-transparent, i.e., the color blends with the background color. Here is an example of the red color(only the first light-bulb is on, the other bulbs are off): .box{background-color: #ff0000;width: 100px; height: 100px;} The RGB/RGBA colors method —this method is also based on each color being a combination of red, green, and blue. There are, however, two differences between this method and the hexadecimal one. First, this method uses decimal values as opposed to hexadecimal values in the previous way. Second, the syntax isn’t a string of numbers but a function — rgb() or rgba(). The functions accept a three-digit number between 0 and 255 for each of the red, green, and the blue “light-bulbs”. 0 means that the bulb is off, and 255 indicates that the light-bulb is with full brightness intensity. The rgba() function accepts a fourth parameter — the opacity. Its value is a decimal fraction, where 0 means full transparency, and 1 means full opacity, and the fractions in between are the element’s transparency percent. Here is an example of the red color in RGB method: .box{background-color: rgb(255, 0, 0);width: 100px; height: 100px;} Working with the methods based on the color being a combination of red, green, and blue, raises a few challenges. The first is that this method isn’t intuitive — it isn’t how our minds perceive colors. When we look at a color, our brains don’t separate it into red, green, and blue. Therefore when writing the colors in such a way, we can’t easily recognize a color by its RGB number, whether hexadecimal or decimal. Another potential challenge is maintenance. Web designers might sometimes want many shades of each color, for example, 30 types of blue, 20 types of orange,…

Like to keep reading?

This article first appeared on medium.com. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply