Formulas for Greyscale

Formulas for Calculating Pixel Brightness (i.e. Greyscale)

there are many . . .

here 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, clicking a different formula produces a different brightness value. See the brightness value in the colour picker below, this is different for each formula, thus a different level of greyscale depending on the formula used to calculate it.

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.

LEFTMOST BLOCK in brightness formula options:

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.

CENTRAL BLOCK in brightness formula options:

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.

RIGHTMOST BLOCK in brightness formula options:

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. There’s a demonstration of these differences on my page Greyscale is another way of saying Brightness.

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 very close to Photoshop’s basic greyscale conversion – PhotoShop has a number of options for doing the job.