Development Pages

Eighteen Shades of Greyscale
Eighteen different formulas for greyscale.
Set a colour using the sliders, this is then converted to greyscale using eighteen formulas, and you can see each colour’s brightness (i.e. greyscale) value from the chart. Scroll down for an explanation of all the different results.
255 255 255   Base Colour
  There is another view of greyscale charts at
Web Hex:
calculation type bright 1–4 dark 1–4
like-Photoshop gamma(native)
Rough-n-Ready gamma
CIE XYZ gamma
CCIR601 YIQ gamma
Lightness linear
Average linear
There are different ways to calculate greyscale from a colour. They all work well for different jobs, horses for courses, and very badly for other jobs. Generally, looking at a photo converted to greyscale, it’s nigh-on impossible for the eye to tell the difference, but significant when defining text and manipulating photos.
like-Photoshopred_factor 0.2235, green_factor 0.7154, blue_factor 0.0611, exponent 2.4. See Readable Text in Colour – STW*. Note this will set a value that is abolutely like Photoshop only when the calculation type is Gamma (i.e. the native calculation type).
Rough-n-Readyred_factor 0.22475, green_factor 0.7154, blue_factor 0.5575, exponent 2.234. This is my simplified approximation to the value achieved with like-Photoshop gamma. See Readable Text in Colour – STW*. The similarity will only pertain when the calculation type is ‘rough-n-ready(native)’.
CIE XYZCIE XYZ coefficients of red_factor 0.2125, green_factor 0.7154, blue_factor 0.0721. The native format is given as linear because that is what many guidelines suggest, though used with a gamma calculation these factors are not far off what you get with Photoshop.
CCIR601 YIQYIQ 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). Coefficients of red_factor 0.299, green_factor 0.5870, blue_factor 0.114. These factors give quite different results from the like-Photoshop and CIE XYZ factors, and quite why the W3C guideline-devisers suggested these, as of all the options they seem the furthest out in terms of practical use, is one of life’s mysteries still to be explained.
LightnessLightness: ½ × (max(R,G,B) + min(R,G,B)), see Puzzling Greys.
AverageAverage:(R + G + B) ÷ 3, see Puzzling Greys.

Dave Collier 2020 . . . email me . . .