Development Pages
Dave
COLLIER

 

 
 
 

Formulas for Calculating Pixel Brightness (i.e. Greyscale)
There are many
A
colour on screen – most computer screens – is produced from dots of red, green and blue light in different brightnesses. This will vary from monitor to monitor depending on which red, which green and which blue, and how relatively bright each of those inputs is in order to create any given hue. Some software allows the colourspace to be defined, therefore a given combination of brightness levels of the red, green and blue light may not always look the same on a single monitor, as it may have been adjusted for the colourspace.
Among it all, we need a not-too-complicated formula for converting a colour image to greyscale, especially to establish the relative brightness of each pixel or area. I standardise on the options shown on this page.
EXPLANATION
The RIGHTMOST two in the above set: Lightness and Average, are a simple formula as explained below.
For the CENTRAL block: sRGB, YIQ and CIE XYZ, DCs ; the Red, Green and Blue (R G B) values (or levels of brightness) are multiplied by a factor. Then what happens depends on what is selected on the left-side option.
gamma: the R, G and B values are run through the gamma formula as shown further down this page. Sometimes called the gamma-decompress, weighted sum then gamma-recompress method. Gamma gives a smoother, less jagged distribution of brightnesses than a linear formula as you can see by clicking on the checkboxes on this page.
gamma exponent: if blank, this is 2.4, but could be modified to see the effects. It applies only if gamma is selected.
squared: each R, G and B value is squared (i.e. raised to the power of 2), then multiplied by its factor, the three values are added together, and the square root taken of the result. This gives an outcome that is closer to the gamma calculation (for the same mulitplication factors) than simple linear, so is a none-too-bad quick and simple option.
linear: each R, G and B value is multiplied by its factor, the three values are added together to get the greyscale result.
sRGB: factors R: , G: , B: .
YIQ: factors R: , G: , B: .
CIE XYZ: factors R: , G: , B: .
DCs: factors R: 0.32, G: 0.46, B: 0.22. DCs are my own-designed factors for brightness and they give a more even distribution of brightness levels across the spectrum than do any of the other (more official) formulas, as you can see if you click on the by brightness checkbox and select different calculation formula options.
note: normally only the sRGB factors would be run through a gamma calculation, but there’s no harm in seeing the effects of other factors doing so too.
note: the YIQ factors applied linearly are those recommended by the WWW consortium (W3C) for determining colour contrast of text on web pages, see W3C Working Draft Checkpoint 2.1. Why they did so is a mystery as it is among the least satisfactory of the options for that particular job. See Text Readability in Colour.
Lightness: this is a simple linear formula made by adding the highest of the red, green and blue brightness levels to the lowest, and dividing the result by 2. This is quite widely recommended, but did you know? the hue has no bearing with this formula, all that is being measured is the saturation and brightness (or more acurately darkness). A yellow at 100% saturation will give the same value as a blue at 100% saturation – that’s not much use is it? No course it isn’t.
Average: a simple linear formula made by adding the red, green and blue brightness levels together and dividing the result by 3. This formula does not take any consideration of hue either. It is better than the lightness formula as it is essentially counting the intensity of each of the red, green and blue elements that make up a pixel. Yellow will come out brighter than blue because yellow is a combination of red and green (on the screen). For a given saturation however, yellow will give an identical result to cyan and magenta, which is closer, though not as good as the weighted formulas.
NOTE
All of these options ‘work’. Each will each produce a brightness level between 0 and 255, that can be used to make a greyscale by setting each of the red, green and blue values to that brightness level. On a photograph converted to greyscale, each option will produce a result that looks like greyscale. But for many colours each will produce a different brightness level, which may be significant depending on what the results are being used for.
FORMULAS
Gamma
The gamma formula uses a classic linear to sRGB and sRGB to linear conversion. Mathematically that can be seen on the page A close look at the sRGB formula and in structural code on Optimizing conversion between sRGB and linear.
Gamma function in Javascript:
/* Inverse of sRGB "gamma" function. ********************** */
function inv_gam_sRGB( ic) {
var c = ic/255.0;
return c <= 0.04045 ? c/12.92 : Math.pow(((c+0.055)/(1.055)),2.4); >
}
/* sRGB "gamma" function ******************************** */
function gam_sRGB(vi) {
var v=vi<=0.0031308 ? vi * 12.92 : 1.055*Math.pow(vi,1.0/2.4)-0.055 >
return (v*255);
}
/* GRAY VALUE ("brightness") *************************** */
function gamma_grey(r, g, b, rY, gY, bY) {
return gam_sRGB( rY*inv_gam_sRGB(r) + gY*inv_gam_sRGB(g) + bY*inv_gam_sRGB(b) );
}
You get a brightness (i.e. greyscale) value by calling:
brightness_value = gamma_grey(R, G, B, red factor (e.g. for classic sRGB), green factor (e.g. ), blue factor (e.g. );
You’ll find that with the sRGB factors that gives you a brightness value that is equivalent to Photoshop’s greyscale conversion (well, I do).

 

 
Dave Collier 2020 . . . email me . . .