Website pages would be boring and uninteresting without images, about working with images images images in HTML we spoke earlier and in great detail. But images have one significant disadvantage: each image is an additional HTTP request to the server and, accordingly, an additional load on the hosting.
Colors in HTML are used for different purposes, for example, we can design the layout of the site, highlighting those or other HTML elements of the page in one color or another.
With color we can focus the attention of our visitors to a particular text or block on the site. Note that the state of HTML links is also defined with color, so that the user can understand which link he has already clicked, which has not yet visited, and which HTML page he is currently on.
Be careful, using colors for the design of HTML documents, not all colors go together, and not every color will be pleasing to visitors to your site. But about these subtleties you better ask web designers, this article will help you understand the technicalities that allow you to control the color of the elements of HTML pages.
But you should not forget that design should be separated from the content, and that’s why it’s better to use CSS for manipulating colors in HTML pages, but we will talk about that in another publication. For now, we’ll look at what tools there are in HTML to manipulate color in website pages.
There are many color models in the IT industry for manipulating color. The most widely used model for color representation is the RGB model. We will talk about some of the features of that model here, and for a more detailed introduction to RGB there will be a separate publication. Below you will find a list of color models used in IT (not only in HTML and CSS):
RGB model. This model is very widespread and is probably one of the most convenient and common ways to manipulate the color of HTML elements.
The RGBA model. This model is very similar to the RGB model, but includes an alpha color channel. The peculiarity of the RGBA model is that it allows you to adjust not only the color of the HTML element, but also its transparency due to the alpha channel. The RGBA model was added in CSS3 and is not supported by older browsers.
HSL Model. The peculiarity of the HSL model is that we define color using its parameters: hue, puffiness and lightness. This model is a bit more complicated to understand than the RGB model.
HSLA model. This model is very similar to the HSL model, but like the RGBA model, it also works with an alpha channel, so we can use HSLA to set not only the color of the HTML element on the page, but also its transparency.
HSV (HSB) model. This model should not be confused with the HSL model. While the first four models can be used in HTML or CSS for the design of web pages, the HSV model can’t. The HSV model was developed by one of the founders of Pixar in 1978, and is very similar to the HSL model.
The CMY or CMYK model. This model is used in all color printers for printing. The CMYK model is based on the rule that printing is done on white sheets of paper. Every CMYK color is made by mixing Cyan (pale blue, turquoise), Magenta (magenta) and yellow. Each color in the CMYK model has an opacity characteristic (amount of paint), measured as a percentage. But in addition to these three colors, CMYK uses black as well.
All of the above color models are hardware-dependent, that is, if you set the color of an HTML element using RGB or HSL models, then you can not be sure what shade of color your website visitor will see, as all users have different monitors and they convey colors differently. Note, too, that all of the above models are based on the RGB model and any color specified in any of the models (except HSLA and RGBA due to the alpha channel) can be converted to RGB.
As for the hardware-independent models of color transfer, it’s worth noting the LAB model. So, we diverted a bit from working with color in HTML and got acquainted with some color models. Note that browsers “understand” only the first four models: HSL, RGB, HSLA and RGBA. Therefore, we can only control the color of HTML elements with these models.