HSL to HEX

Compare HSL to HEX

CSS 3 introduces another way to define color using HSL (from the English. Hue, Saturation, Lightness). is a model in which color is determined by three parameters: hue, saturation and lightness. Let's take a look at each parameter separately. The key advantage of HSL is the ability to specify color characteristics independently of each other. This opens up tremendous opportunities for you. You can easily make the color brighter, darker, more saturated or desaturated. And while maintaining its shade. Or vice versa - change the hues without changing their saturation or brightness. Often, preprocessors are used to use such features, but it is possible without them. The hsl () function is used to specify HSL colors. The function takes three values, separated by a comma: Hue, Saturation, and Lightness. By changing the values of saturation and brightness, you can get adjacent hues for a particular color.

In most cases, it is possible to recognize a color by a hex code, taking into account only the first digits of the pairs. In the example below, it is clear that the color is mixed with a lot of red, a little blue, and no green at all. Understanding color by hex code allows a web designer to navigate the page code faster, and besides, you can always impress colleagues or clients by saying Ah, what a wonderful shade of burgundy. You can also easily change the brightness, hue, or saturation of a color by editing only its hexadecimal code. In the first example below, one of the pairs is changed in 10% steps, while the color brightness increases. In the second example, the brightness rises, but the saturation falls. RGB values can also be specified using hexadecimal (HEX) color values in the form: #RRGGBB, where RR (red), GG (green), and BB (blue) are hexadecimal values from 00 to FF (the same as decimal 0- 255). The hexadecimal system, in contrast to the decimal system, is based, as its name suggests, on the number 16.