I like this page because it shows one of the common issues (ugly gradient fills), explains the cause, and provides a solution usable in any web project:
https://bottosson.github.io/posts/oklab/The main thing to remember is that mathematical operations like blur and resize ought to be done in a linear space, but everything else needs to be non-linear in some way.
- Nonlinear gamma improves storage efficiency because it allocates bits more effectively “where it matters”.
- CRT displays had a nonlinear response curve as well, and this has been baked into standards like sRGB and all video standards.
- The human perception of color is also nonlinear.
These gamma curves are all generally different now, especially with modern HDR display pipelines.
So a correct pipeline is:
1. Undo the source curve into a linear format. E.g.: camera raw formats are usually logarithmic.
2. Do special effects like blending, sharpen, resize,
Etc… in linear format.
3. Show grading controls that use a perceptual space to the human user.
4. Encode the output with the appropriate gamut and gamma for the output format, such as sRGB, or some HDR format. Tag it correctly.
As an example of what not to do, the chap that recently invented the “quite okay” image format[1] just ignored all this and encodes RGB 8-bit triples as-is with no indication of color space.
This is simple, clear, and wrong.
In the case of 3D graphics the RGB triples are a direct measurement of luminosity, and go to infinity. The common sRGB format goes from zero to one and represents the input to a function that maps that to an actual intensity. They’re not compatible! This is why mixing these in a game engine results in faded colours. Similarly, the linear output of a ray tracer can’t be sent to a screen as-is, it’ll look wrong.
Similarly ask yourself: which red, green, and blue? Each format defines these with differently! The “red” of Display P3 used by most Apple devices and HDR cinema projectors is very visibly different to the “red” of lsRGB!
These aren’t platonic ideals but points in space that can be measured, defined, and mapped into other color spaces.
[1] https://en.m.wikipedia.org/wiki/QOI_(image_format)