One tool to change web page styles is CSS colors. There are several ways to change this setting. Each has both advantages and disadvantages.
Title
The color property sets the color of the element. CSS includes 145 shade names. Among them, there are simple ones (for example black, blue) and complex ones (for example crimson, lawngreen).
Since the entire list is difficult to remember, names in the stylesheet are rarely used.
RGB
Most TVs, smartphones, monitors work with the RGB color model. That is, any shade can be set by a combination of primary colors, which include red, green and blue. A similar approach is used both in devices and in CSS . The colors of the basic composition take values from 0 to 255. And the number of possible shades is 16777216.
Since the RGB model is directly related to the physical laws of color rendering, black is specified in it as rgb (0, 0, 0), white - rgb (255, 255, 255). The RGBA system is completely analogous to RGB, only with the addition of an alpha channel. It affects transparency, which mixes the hue with the background. In this case, the type of element will vary depending on the "substrate".
Hsl
To understand how HLS works, you need to imagine a color wheel. In its center is red, then (clockwise) all other shades of the rainbow. To define colors in CSS using the HLS system, three parameters must be set:
- hue (in degrees) - direction from the center of the circle;
- saturation (in percent) - how much color is needed;
- brightness (in percent).
For example, violet can be defined as follows: hsl (315, 100%, 45%). HSL is most convenient for experimentation. Having studied the color wheel, you can approximately imagine what color is given to a particular element while viewing the style sheet. HSLA - the same HLS, only with the alpha channel: hsl (0, 100%, 50, 0.6) - red, transparent a little more than half.
Hex
In CSS, colors can be specified using a hexadecimal representation, for example, orange is determined by the value # FF4500 .
For a better understanding of what a hexadecimal representation is, it is worth looking deeper into the decimal system. It has numbers from 0 to 9. When you need a number greater than 9 when calculating, one more digit is added, and it turns out 10, then 100, etc. In the hexadecimal system, everything is exactly the same, but after 9 it goes A, then B and so on to F is the same as 15 in the decimal system. Then one digit is added, and it turns out 10, equal to 16 in our usual calculus.
Like RGB, hues in HEX indicate in which proportions the primary colors should be used. However, they are not separated by commas (color: # FFD500). Every two characters indicate the amount of red, green, and blue.
As a rule, the HEX system is not used during experiments, since it is impossible to choose the right CSS colors . The table may help in this matter, but if you constantly check it, the work will be delayed. The hexadecimal representation is most convenient when transferring a template from a graphical editor. After all, it’s much easier to copy only one digit from it than three at a time.
Which is the best way?
Nothing concrete can be said about this. If the elements of the interface need transparency, choose between RGBA and HSLA. If you want to experiment in a browser, the HLS color wheel will be most convenient. If you use the palette or transfer the design from Photoshop, you should prefer hexadecimal CSS color codes.