We have talked a lot about CSS, design and other issues related to the appearance (front-end) of a website or application. I say application because we remember that nowadays we can create Apps from HTML language, as is the case with the PhoneGap framework. But we’ve never talked about how colors work or how to use them.
HTML color codes were born to be able to do a higher gamut and have variety, something that was necessary when the ability to paint more than 16 bits per screen was achieved (we talked about a long time ago). On a personal level, I attribute the rise of these codes to the arrival of CSS, since that was when we began to take design more seriously. Let’s remember that, unfortunately, before, tables were used to structure the appearance of the web, a totally incorrect and obsolete practice. But how do these codes work? Let’s see it.
How to apply colors in HTML pages
These codes are not only limited to HTML, in fact you can find them in image and video editors, etc., since they are a standard, but in the case of web pages there is a characteristic that we need to take into account, and that is that the range is different. What I mean by this? Well, there are colors that are not displayed correctly, or change depending on the screen: the type of monitor, the refresh rate and other variables.
This implies that when we select a color in our image editor, at the moment of raising the front-end, we must think about using HTML colors to guarantee maximum compatibility. This option is usually indicated when selecting the editor’s color palette, and as a result we will see that the variety is reduced, even leaving many to our choice.
hexadecimal colors
On the web, colors are represented by a hexadecimal number, a string of six digits that mixes numbers and letters, beginning with the pound sign (#). For example, white would be #FFFFFF. This is why a color is represented by the intensity of its three components: red, green, blue, which generates 8 bits per color, 24 in total. Thanks to these 24 bits, we can have at our disposal a huge variety of colors (16,777,216 to be exact). That’s why we have the hexadecimal values. But you will ask yourselves “But Albert, they are a barbarity of colors. Do I have to remember them all?” And my answer is no, luckily not. Even I would like to shoot myself. Here come the color pickers, some tools that you can find on the net without problems that will give you the value you need. These pickers are very useful for programmers, since unlike designers, they won’t necessarily have an image editor handy just to look up the color they want. A blow from Google will give you a website that is dedicated solely to offering the codes, but I leave you the one that I usually use, the one from w3schools, quite complete and you can also see the changes in real time.
A little history..
But it was not always like this. As I said before, monitors in the past were not capable of generating 24 bits, with a total of so many colors. In fact, they only showed 256 colors, since the representation of these colors on the screen depends on the graphics chip, and in the early years of computing, when there were desktop environments and a higher range of colors was necessary, the hardware, despite being Powerful for the date, it had the technology of that time, much lower.
Today we can make several monitors connected to each other simulate different points of view of the player, while in those past years representing a house made of colored triangles was a reason to uncork the cava. What did they do then? There were what are called safe web colors, or web-safe colors. This concept was born from the fact that not everyone had the same hardware, and the differences and fragmentation were too noticeable. That is to say: it is possible that in the company that made the web product the material was new and state-of-the-art, but it did not guarantee that the rest of the people in their homes had the same characteristics. In order to avoid problems with past hardware, these colors were born, which reduce the palette in order to design a web interface suitable for everyone.
As you can see, there is a whole story behind those long and cumbersome codes that we have sometimes had to use in development or design, and although it is true that basic colors such as “red”, “blue”, “yellow”, etc. are recognized in their “pure” statewhen wanting to make more specific variations we must consider the rest of the bits that make it up, and for this reason we must specify with hexadecimal those that we want to use.
Did you know these details about web colors? Remember that with the rise of web languages for the development of apps, as I said at the beginning, this theory works perfectly for that sector, so it is something that interests us all too.
Related course: Multimedia Graphic Design Course