SRGB

From Derivative
Revision as of 15:11, 23 August 2019 by Malcolm (talk | contribs)
Jump to navigation Jump to search

Overview[edit]

sRGB colorspace is a complex subject that involves understanding how monitors display color, how pictures/movies are stored, how our eyes percieve color and brightness and also how the limited precision of 8-bit images is optimized to store color information more efficiently. sRGB colorspace is very similar to a gamma 2.2 curve, with a linear portion at the low end.

Some articles that help explain sRGB:
https://www.cambridgeincolour.com/tutorials/gamma-correction.htm
https://en.wikipedia.org/wiki/SRGB
https://blog.johnnovak.net/2016/09/21/what-every-coder-should-know-about-gamma

Image Data[edit]

Image files such as .jpg, .gif etc usually store the data in 8-bits per color channel. 8-bits per color channel only allows for 256 unique levels of information. This isn't enough information the accurately represent colors to the human eye, so tradeoffs need to be made. Human have better color perception for darks that brights, so more of these levels are used to encode the dark information than the light information. This is generally done by brightening the images with a gamma or sRGB curve. This brings up the dark colors and flattens out the bright ones, giving more levels to the darks.

Monitors[edit]

Generally monitors don't display pixel values linearly. There is usually a curve to how much the brightness changes vs. the pixel's color. Many monitors use the inverse sRGB curve as their outputs, but calibration and other color adjustments affect this. This curve by default will make things darker, as is shown in the curve images in the listed articles. This is done so counter sRGB curve that is applied to images which the monitor manufactrers know they are usually showing. The two curves essentially cancel each other out, resulting in a visually linear display of brightness.

Visualizing and understanding sRGB[edit]

The following .toe file helps visualize what is going on with your monitor. The node 'fakedMidGrey' is a grid mix of 100% black and 100% white pixels. If you squint a little your eyes will blend these into what it perceieves as mid-grey. Notice how this image is very close is brightness to the 'realMidGrey' which has pixel values of 0.7333, and quite a bit brighter than the 'linearMidGrey' of 0.5. This is because the monitor is darkening the output using the inverse sRGB curve. Note that the monitor's curve is NOT affecting the brightness of 'fakedMidGrey' at all, because its only showing pixels with the darkest and brightest possible values. The curve won't change these. So we've established what real mid-grey should look like as a constant color. If 'realMidGrey' does not look like 'fakedMidGrey' on your monitor, then it means your monitor curve is not sRGB (gamma 2.2).

Next, look at the 'linearRamp' node. This may look like a correct ramp, especially if you are used to seeing it in TouchDesigner. One would then expect mid-grey to be directly in the middle of this ramp. The sRGBRamp is the same ramp, converted to sRGB space. This ramp may look incorrect depending on what you are used to. Regardless, look at the Over TOPs that are comparing the correct mid-grey with the ramps. Notice how the mid-grey blends in with the sRGB ramp in it's middle, while only blends in with the linearRamp near it's top end.

This article is not yet finished