Colors available for the web

We will discover the number of colors that we can use on a website, and if these are the same whether the website runs on one computer or another, we will now address safe color palettes: Websafe and Reallysafe

On the web we must give special treatment to color, since its representation has specific characteristics and as designers we do not know what color configuration the user can have. Faced with this situation, we propose the use of tools such as safe color palettes, which, although in 2015 they are no longer as valid, is something that every designer who intends to work in the Internet should know.

What is color like in a natural environment?

The human eye can distinguish approximately between 7 and 10 million colors, which makes sight for us the main sense that connects us with the outside world, being able to affirm that around 80% of the information we receive from the outside world is visual. .

Painters and graphic designers use this human ability to appreciate colors to create works that penetrate the soul and inspire feelings in the beings who contemplate them. But what can we do when we have to express ourselves with a limited number of colors?

Just a few years ago, most of the computers available to the general public were, with the vision we have today, large, slow junk with few features, not only in terms of memory and processors, but also not also at the level of graphic features. And the peripherals were also very limited. All this meant that, at a graphic level, these teams worked with only 256 colors.

Currently, computer equipment increases its performance day by day, and the normal thing now is to work with millions of colors and with high-performance monitors. Most people already have advanced graphics cards, with memories of up to 64 megabytes, which develop millions of texels (the texel, a texture element, is to 3D graphics what the pixel is to two-dimensional graphics). .

Introduction to color on the web

But when it comes down to it, how many colors do web designers have to work with?

The answer to this question is discouraging, since when it comes to displaying our pages we depend on specific programs, browsers or browsers, which are responsible for displaying the content of the pages that arrive from the server through the HTTP protocol.

These programs, apart from the great difference between them when it comes to working, interact with the operating system in which they run, which ultimately causes gibberish that makes the colors of our pages vary depending on the computer used, according to the browser and depending on the operating system on which it is mounted. For all this, the millions of colors that are available to work with are reduced to just a few (and so few) when creating web pages.

The operating system identifies three basic colors, from which it builds all the others through a mixing process by screen units (pixels). These colors, as we have already seen, are red, blue and green, and the system defined by them is known as RGB. The color depth bits mark how many bits of information we have available to define the colors derived from these primary colors.

The more bits, the greater number of variations of a primary color we can have. 256 colors require 8 bits, thousands of colors require 16 bits (high color), and millions of colors require 24 bits (true color). There is also another color depth, 32 bits, but with it, more colors are not achieved, but the ones we use are displayed faster.

In its early days, most users had monitors capable of interpreting only 256 colors (8 bits). If we take into account that the operating system itself is left with 40 for its internal management, the result is that there were 216 colors left to display graphics on the screen, colors that were not defined by standard.

In 1994, the Netscape company established a subdivision of the color wheel into 216 equidistant colors, obtaining a set of colors that they called Netscape Color Cube.

This division of the circle corresponds to 6 shades of red, 6 of blue and 6 of green, from which the 216 possible colors are obtained by mixing them, so all of them will have a hexadecimal code in which each primary color is defined by a pair of equal values, these being 00,33,66,99,CC or FF.

With the passage of time, computers were increasing their graphic features, currently being common color depths of 16, 24 and 32 bits.

If we use a depth of 24 bits, corresponding to millions of colors, we have a wide range to work with. When we use a color depth of 16 bits we have thousands of colors available, but then the additional problem arises that the division of this color range does not correspond to that of 256 colors or to that of millions of colors, giving the same code. slightly different colors. For example, #663399 is the same color at 256 and millions, but not the same as thousands of colors.

Over time, a list of colors has been adopted that has been given a representative name in English, in such a way that modern browsers interpret it and translate it internally by its equivalent hexadecimal value.

safe color palettes

Most of the colors obtained with 16 bit depth are different from those obtained with 8 and 24 bits. Also, if 8 bits (256 colors) are used, the monitor will be unable to display many of the colors obtained if the page has been designed in millions of colors.

The need to work with a range of colors compatible with all depths is then evident. But how many are these colors?

Here comes the disappointment of the web designer, since this number is actually very low. Traditionally, the one mentioned above has been considered a safe color palette, made up of the 216 colors of the #aabbcc type, where a, b and c must be 0,3,6,9, C or F, which is called WebSafe.

This palette is not actually safe, due to the problem with the depth of thousands of colors. If we add the additional variable that each operating system and each browser interprets the colors at will, the end result is that we only have a small palette, made up of 22 colors. This palette is known by the name of ReallySafe.

In the following image you have the WebSafe palette. Inside it, highlighted in red, are the colors of the ReallySafe palette.

As you will understand, working only with the 22 colors of the ReallySafe palette is not going to allow us to build a very attractive website, since the limitation imposed is excessive.

As an alternative, we can work addressing the largest number of users possible, and for this we can design our pages using the 216-color palette well, with which we will have covered the range of users with 8-bit and 24-bit color systems.

This WebSafe palette depending on the operating system used.

And also according to the web browser.

These color limitations may seem like a hindrance to the design of web pages, but we should not give it more importance than it should. First of all, 216 well-used colors give a lot of play. Secondly, we can design our pages with the full range of 24 bits (millions of colors) since most users currently use high-performance computers.

At this point, common sense, experience and testing the page in different systems and browsers are the best weapons to achieve the desired design.