hue what!

Greyscale Conversions
Select picture
or specify image url apply
will be converted to 500px × 375px

This page require HTML5 – your browser version is too old for this page to work for you.
Click anywhere the colour picture to select a colour. Move the mouse to change selection, click again to stop colour change on mouse move.
Selected

brightness weighted   exponent
brighten

likePS

W3C YIQ

YIQ Sqd

CIE XYZ

XYZ Sqd

Lgt’ness

Average

Click and move the mouse over the colour picture. The above boxes show the colour under the mouse pointer converted to greyscale by each of seven different formulas (explained at the foot of the page).
Brightness weighted option also explained at the foot of the page.
For a given hue different formulas produce different greyscale, particularly on yellow colours, yet in the converted photos that is barely noticeable, presumably because we see the shades in a photo relatively, not absolutely.
When converting a complex photo to greyscale it may not matter much which formula is used, but when calculating to greyscale for comparative purposes the formula is significant.
likePS
W3C YIQ
YIQ Sqd
CIE XYZ
XYZ Sqd
Lightness
Average
There are many different ways of calculating greyscale, by multiplying the red, green and blue colour values by different fractions. These give different results though, looked at on greyscale-converted complex images side-by-side, those differences can be hard to detect – the clearest way of detecting the differences is on yellows. Alternatively by changing greyscale formulas on Experiments with Colour Filters the difference can be seen on the greyscale panels as the formula is switched.
The results can be applied linearly or with a brightness weighting. (For brightness weighting in graphic form, see Colour Brightness Experiment.) Brightness-weighted results will inevitably be darker by the nature of the curve, as shown graphically on Colour Brightness Experiment.
 Brightness weighted This applies a brightness weighting according to the following formula, where ic = the calculated brightness value and exp the exponent, the function returns a percentage that is then multiplied by 255: var c = ic/255.0; if ( c <= 0.04045 ){ return c/12.92; } else { return Math.pow(((c+0.055)/(1.055)),exp); }
The formulas for calculating greyscale are as follows:
 like PS Approximates to the greyscale calculation formula used by Photoshop. red_value × 0.2235, green_value × 0.7154, blue_value × 0.0611, each in turn passed through the inverse gamma formula: var c = ic/255.0; if ( c <= 0.04045 ){ return c/12.92; } else { return Math.pow(((c+0.055)/(1.055)),2.4); } then the result vi passed through a gamma formula as follows, which returns a percentage that is then multiplied by 255: return vi<=0.0031308 ? vi * 12.92 : 1.055*Math.pow(vi,1.0/2.4)-0.055; W3C YIQ YIQ coefficients also known as Digital CCIR601 and suggested in the Web Accessibility Guidelines from the W3C and challenged by me (see Holes in the W3C Colour Readability Guidelines. ) red_value × 0.2125 + green_value × 0.7154 + blue_value × 0.0721 YIQ Sqd sqrt((0.0.2125 * red_value^2) + (0.7154 * green_value^2) + (0.0721 * blue_value^2)) CIE XYZ red_value × 0.299 + green_value × 0.587 + blue_value × 0.114 XYZ Sqd sqrt((0.0.299 * red_value^2) + (0.587 * green_value^2) + (0.587* blue_value^2)) Lightness ½ × (max(R,G,B) + min(R,G,B)), see Puzzling Greys. Average (R + G + B) ÷ 3, see Puzzling Greys.

[ send me a message]