The colors you see on that web page they are not good. PNG images or hexadecimal values ​​used in CSS code or SVG images betray us, but the fault lies not with them but in our obsession with trying to compress the data.

To prevent these files from rapidly increasing in size, use a lossy compression algorithm It’s called “8-bit sRGB” betting since 1996 and that’s exactly the problem.

Compressing killed the colors (somewhat)

The algorithm’s purpose is legitimate: to represent color data use fewer bits which would be suitable for faithful representation. The goal was to save data and make our ever-growing websites a little lighter.

The inside and outside of the gray square should have the same overall brightness. Both emit a moderate amount of light, half as bright as white. Incorrect color rendering will cause the exterior to appear darker.

the ideal would be store the actual numerical values ​​of the brightness this corresponds to the intensity of the light, much more than a “color space” as some have described it, that’s what sRGB is, it’s a lossy compression technology.

The truth is that this algorithm is misleading. Web developers believe they can add or subtract colors by presenting users with sRGB color numbers, but these numbers have no real meaning: You cannot take two colors and mix them and expect to get the expected color.but that’s what all major web browsers do.

What they really should do convert these sRGB values ​​to linear RGB valuesprocess it and then convert the result back to sRGB if necessary.

Those that operate directly on sRGB values they are doing it wrongand this results in poor color representation on the web.

But there is a solution. The color interpolation attribute of SVG files allows to fix the problem, but curiously does not implement any browsers Although this attribute was created in the SVG 1.1 specification of 2003. Almost two decades have passed since then, and browsers are not doing their job right.

The W3C body is well aware of the problem and indeed there are suggestions to solve this Revision of this standard in CSS4. Oklab, which makes use of three coordinates and has various applications, recommends the use of perceptual color space.

Interestingly, it’s our graphics cards and video game developers. Linear processing of this RGB data is required for realistic environments, and modern GPUs Can transparently convert from and to sRGB while uploading and rendering images without loss of performance.

More info | Web Color Still Bad