Development Pages



Formulas for Calculating Pixel Brightness (i.e. Greyscale)
There are many
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. Some software allows the colourspace to be defined, therefore a given combination of specified 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.
There are many different ways of calculating the brightness of a pixel, they all work, though don’t all produce the same results. That they all work while different is because of the eye making sense of relative brightnesses.
I use the following options panel on these pages, where you can select a formula for calculating brightness. The meaning of the options is explained below.
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 in the leftmost block.
gamma: the R, G and B values are run through the gamma formula as shown further down this page. It’s 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 experimenting with the options on this page.
gamma exponent: if blank, this is 2.4, but could be modified to see the effects. It is used in the gamma calculation formula and so is relevant only if the gamma option 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.
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.
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 very close to Photoshop’s basic greyscale conversion – for PhotoShop, like all good software, has a number of options for doing the job.


Dave Collier colour theory page . . . email me . . .