Wednesday, April 10

All the colors you see on the web are wrong. And the fault lies with your browser


Those colors you’re seeing on that web page they are not ok. PNG images or hexadecimal values ​​used in CSS code or SVG images betray us, but the fault is not with them, but with our obsession with trying to compress the data.

To prevent the size of these files from skyrocketing, we usually use a lossy compression algorithm called “8-bit sRGB” which has been betting since 1996, and precisely that is the problem.

Compression killed (a little) the colors

The purpose of the algorithm is legitimate: to represent color data using fewer bits of which would be suitable for faithful representation. The goal was to save data and make our websites —which are constantly growing in size— somewhat lighter.

Screenshot 2022 04 28 At 14 13 25

The inside and outside of the gray square should have the same overall brightness. Both emit a medium amount of light that is half as bright as white. Incorrect color rendering makes the outer part appear darker.

The ideal would be store the actual numerical values ​​of the brightness which would correspond to the intensity of light, so more than a “color space”, as some define it, sRGB is just that, a lossy compression technology.

The reality is that this algorithm is misleading. Web developers believe that one can add and subtract colors by offering sRGB color numbers to users, but those numbers don’t have much real meaning: you cannot take two colors, mix them and expect to get the expected colorbut that’s what all the big web browsers do.

Also Read  Guía de compra de regalos tecnológicos para el Día de la Madre: 42 ideas en función de gustos y presupuesto

What they really should do is convert those sRGB values ​​to linear RGB valuesprocess them, and then convert the result back to sRGB if needed.

Screenshot 2022 04 28 At 14 15 20

Those who make operations directly on sRGB values they are doing it wrongand that causes the color representation on the web to be inadequate.

There is a solution, however. The color-interpolation attribute of SVG files allows to solve the problem, but curiously no browser implements it despite the fact that this attribute was created in the SVG 1.1 specification of 2003. Almost two decades have passed since then, and browsers do not do their job correctly.

The W3C body is well aware of the problem, and in fact there are proposals to solve it in CSS4, the revision of this standard. It proposes the use of the Oklab perceptual color space that makes use of three coordinates and that has various implementations.

Interestingly, those who do are our graphics cards and video game developers. Linear processing of that RGB data is necessary for realistic environments, and modern GPUs are able to transparently convert from and to sRGB when loading and rendering images without performance loss.

More information | Web Color Is Still Broken



Leave a Reply

Your email address will not be published. Required fields are marked *