Introduction
There are plenty of fantastic websites out there which explain the technicalities of Gamma Correction and SRGB colour correction so won’t try to do the same here. Instead this post is to show visually the effects of SRGB/Gamma Correction in image composition and how blending colours in SRGB space rather than linear space is wrong and can result in images that don’t look as good.
I will start by saying that one of the tips that really helped me in understanding SRGB colour space is that almost every colour image we view on our montitors is in SRGB colour space. We also know that when we are writing techniques or shaders to blend, manipulate or apply lighting to a 3D scene, we want to do this with textures that have first been converted in to linear colour space.
In DirectX or OpenGL for example, this means using SRGB format specifiers for diffuse/abledo textures or any colour data which has been authored visually. When sampling textures in shaders using SRGB formats, the hardware will ensure we are given the values in linear space.
Note: In order to run the interactive examples on this page you need to run in a browser that supports WebGL2.
HTML Colour Gradients
Here we have a few very simple examples showing how even a simple colour gradient block in HTML are not blending in linear colour space and then we have a WebGL version which is correctly converting the images to SRGB colour space.
Notice in the default two images that without gamma correction, we don’t seem to get a nice smooth transition between the red and green and also get a splodge of brownish/dark orange colour after the red. In contrast, the SRGB corrected blend shows a more natural blend of colours.
| Div linear-gradient colour blending | ||
| WebGL Rendered with sRGB Gamma Correction | ||
| Colour Pickers | Red () Green () Blue () | Red () Green () Blue () |
| Presets | ||
Image Sampling:
Below is a 2×2 pixel image with 2 fully red and 2 fully green pixels. We then tell our web browser to stretch the image to be 500×500 pixels in size. Our web browsers will blend the colours together in srgb colour space. On the right hand side we have a WebGL canvas doing the same image render but here we make sure the blending happens in linear space.
 |
Below we have another 2×2 image but this time with a single red, green, blue and white pixel:
 |
And here we have an image showing more blending between more colours:
 |
Image Blending
In the examples below we show the result of blending two images together. Use the slider to adjust the blend amount of each image. In the SRGB Blend image, we do not make any conversions and we blend in SRGB colour space which is incorrect. In the Linear Blend image, we first convert the image from SRGB to Linear, blend the two images together and then convert back to SRGB. Mixing colours in linear colour space is correct.
SRGB Conversion Gone Wrong
Below are some examples of how an image can look when SRGB/Linear conversions are applied incorrectly.
|
| ||
 |  |  |
LearnOpenGL has some great visual examples too which showcase how wrong a 3D scene with lighting can look without proper SRGB consideration (Source: https://learnopengl.com/Advanced-Lighting/Gamma-Correction):
Sources
- Gamma Correction: https://learnopengl.com/Advanced-Lighting/Gamma-Correction
- Adobe Stock Images: https://stock.adobe.com/uk/search
- DirectX Data Conversation Rules: https://learn.microsoft.com/en-us/windows/win32/direct3d10/d3d10-graphics-programming-guide-resources-data-conversion & https://learn.microsoft.com/en-us/windows/win32/direct3ddxgi/converting-data-color-space
Leave a Reply