What is the difference between Hex, RGB and HSL?

When it comes to color output on the screen, there are several ways to encode it. Hex, RGBA and HSLA are 3 of the most commonly used color codes.

Each color code makes sense in different situations. Today's article will explain the difference between RGB, HEX and HSL.

What is RGB?

Starting with the RGB values ​​(Red, Green, Blue) is best, because red, green and blue are the three colors that the screen can use to create quite a lot of other colors.

What is the difference between Hex, RGB and HSL? Picture 1

rgb(255, 0, 0) is red, because R is maximized. If you set G or B to 255, you get real green or red. Setting them all to 255 at once, you will have white (sum of all colors), and setting all values ​​to 0 will give black. If you add a fourth value (alpha channel, from 0 to 1), you can also get transparency. rgba(0, 0, 0, .5) means semi-transparent black.

The RGB balance can change a lot even if you only change the hue of the color, making it difficult for people to manually adjust without a type of RGB generator.

What is hex?

What is the difference between Hex, RGB and HSL? Picture 2

Hex is a different way of writing RGB values. Something like #6a79f7 (chrysanthemum blue) maps directly to rgb(106, 121, 247) . 6a is red, 79 is green and f7 is blue.

First, you should know that in the Hex color system, the letters 'af' represent numbers 10 through 15. Second, everything is in base 16. 21 is 2 * 10 + 1 in muscle. number 10, but in hexadecimal it will be 2 * 16 + 1 .

Hex creates hexadecimal codes that are even more difficult for humans than RGB, although they are easy to copy - paste and can have easy-to-remember alphanumeric combinations.

You can also add transparency to hex code by putting a value equivalent to a 255 percentage at the beginning, such as: #806a79f7 . 80 in hexadecimal = 126, almost equal to 50% of the maximum value of 255.

What is HSL?

What is the difference between Hex, RGB and HSL? Picture 3

HSL has been designed quite a lot for human readability, and it has become popular, especially as an RGB alternative. It works as follows:

Hue means color, and it uses levels of the color wheel to tell you what color you are wearing. If you know the color wheel and position of these main colors, you will be able to tell that 45 is orange and 270 is purple in just 1 second.

1. 0 = red
2. 60 = gold
3. 120 = green
4. 180 = cyan
5. 240 = blue
6. 300 = bright red

Saturation is basically what colors look like. 0% saturation means that the color will only be a gray, while 100% means that it will display fully. If you want to 'hide' the color or make it a bit more floating, you can change this value.

Lightness lets you know how dark or light it is. 0% brightness means the color will be black, regardless of Hue or Saturation settings and 100% brightness will give you white. 50% brightness gives you the most accurate color.

With that information, you can immediately know what hsl(0, 100%, 50%) means. It is red! If you want a richer, richer red, try 0, 70%, 40%. With blue, just change 0 to 240 is! HSL also has transparency, which works like RGB. Just add the fourth value (from 0 to 1), for example hsla(240, 70%, 40%, .5) .

Should use Hex, RGB or HSL?

In general, choosing a color model is a fairly small decision in design, but contributes significantly to the end result. In general, Hex code makes copying easy and great in situations where people can't get too involved. RGB / RGBA is suitable for readability and is best used when humans can adjust the transparency. If you need to change colors manually, go with HSL / HSLA.

>> See more: Standard color code table for programmers, designers