Visualising SRGB & Gamma Correction

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.