Greyscale Images with Canvas

Many image processing algorithms are performed on greyscale images. Even colour image algorithms tend to treat each channel (red, green and blue) as a greyscale image.

There are many methods used to calculate the greyscale value. This article discusses three of the most common ones.


Scarlet Macaw
Scarlet Macaw

Mean

For every pixel in the image, the mean of the red, green and blue values are taken and applied to the new image.

c = (r + g + b) / 3
c = (255 + 131 + 41) / 3
c = 427 / 3
c = 142.3

Lightness

Lightness is the ‘L’ of the HSL colour space. Rather than taking the mean from the red, green and blue values, only the minimum and maximum of these are used.
c0 = min(255, 131, 41)
c1 = max(255, 131, 41)
c = (c0 + c1) / 2
c = (255 + 41) / 2
c = 296 / 2
c = 148

The main problem with this method is that when the median value, the ignored one, is skipped and is close to either the minimum or maximum values, the result can look unnaturally dark or light. This is especially true for cyans and magentas.

Luminosity

Both of the two previous methods perform a straight mathematical translation between the red, green and blue values and the result. However, human eyes do not see colours in the same way. We perceive greens much more intensely than reds which in turn, are perceived much more intensely than blues. To compensate for this, different weightings are added to each colour channel to provide the grey value.
c = r * 0.2126 + g * 0.7152 + b * 0.0722
c = 255 * 0.2126 + 141 * 0.7152 + 41 * 0.0722
c = 54.21 + 100.84 + 2.96
c = 158.01