CSS color properties. Codes of colors

One tool for changing the styles of web pages is CSS color. There are several ways to change this setting. Each has both advantages and disadvantages.

Name

The color property specifies the color of the element. In CSS, 145 titles are included. Among them are simple (for example black, blue) and complex (for example crimson, lawngreen).

Since the entire list is difficult to remember, names in the style sheet are rarely used.

RGB

Most of the TVs, smartphones, monitors work with the RGB color model. That is, any shade can be set by a combination of the primary colors, which include red, green and blue. . This approach is used both in devices and in CSS . основного состава принимают значения от 0 до 255. А количество возможных оттенков равно 16777216. 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 visualization, black is defined in it as rgb (0, 0, 0), white is rgb (255, 255, 255). The RGBA system is completely analogous to RGB, only with the addition of an alpha channel. It affects the transparency that blends the hue with the background. In this case, the kind of element will vary depending on the "substrate".

HSL

To understand how the HLS system works, you need to provide a color wheel. In its center is red, then (clockwise) all other shades of the rainbow. цвета при помощи системы HLS требуется задать три параметра: To define the color in CSS using the HLS system, you need to specify three parameters:

• Tint (in degrees) - direction from the center of the circle;
• The saturation (in percent) is how much color is needed;
• Brightness (in percent).

For example, violet can be defined thus: hsl (315, 100%, 45%). HSL is most convenient for experiments. Having studied the color wheel, you can roughly imagine, while viewing the style sheet, what color is assigned to a particular element. HSLA - the same HLS, only with the alpha channel: hsl (0, 100%, 50, 0.6) - red, transparent slightly more than half.

HEX

CSS цвета можно задать, используя шестнадцатеричное представление, например оранжевый определяется значением #FF4500 . 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's worthwhile to go deeper into the decimal system. It has numbers from 0 to 9. When you need a number greater than 9, you add one more bit, and you get 10, then 100, and so on. In the hexadecimal system, everything is exactly the same, but in it after 9 goes A, Then B and so on to F is the same as 15 in the decimal system. Then one bit is added, and we get 10, equal to 16 in the usual calculus.

As in RGB, shades in HEX indicate in what proportions to use the primary colors. They are not separated by commas (color: # FFD500). Each two characters specify the amount of red, green and blue.

CSS. As a rule, the HEX system is not used during experiments, as it is impossible to select the desired CSS colors . может помочь в этом деле, но если постоянно сверяться с ней, работа затянется. The table can help in this matter, but if you constantly check with it, the work will be delayed. Hexadecimal representation is most convenient when moving a template from a graphic editor. After all, it is much easier to copy from it only one number, than alternately three.

Which way is the best?

On this account, nothing specific can not be said. If the elements of the interface need transparency, choose between RGBA and HSLA. If you want to experiment in the browser, the HLS color wheel will be the most convenient. If you use a palette or transfer a design from Photoshop, you should prefer hexadecimal CSS color codes.