Colour Brightness Experiment

There are two colour panels, one left, one right, titled Base Colour and Adjusted.

To the left of the colour panels there are four sliders.

The leftmost slider adjusts the BRIGHTNESS of the base colour that is in the left panel and shows the result in the right panel.

The three RGB sliders that are to the left of the colour panels adjust the colour (hue) in the leftmost panel.

The three sliders to the right of the colour panels are not for sliding by hand, they show the brightness RGB values of the rightmost colour panel. They are there as sliders solely to show the RGB values in a graphic format that is relative to the sliders on the left.

To the right of the colour panels, where it says ‘Colour Brightness Value’ there are seven options and four calculation criteria, each one showing the brightness value of both the base colour (the leftmost colour panel) and the adjusted colour (the rightmost colour panel).

Each of the Colour Brightness Values is expressed according to a different formula.

There are different ways to calculate greyscale from a colour. They all work well for different jobs.

Key:

Native	Native means gamma sRGB for like-Photoshop, rough-n-ready for Rough-n-Ready, and linear for all the rest. Note that the un-brightness-weighted formulas all display linearly on the graph. Linear here referes to a formula that isn't raised by any exponents along the way.
Gamma sRGB	The gamma sRGB formula is a greyscale produced from a formula involving both inverse gamma and gamma sRGB. This is described on Formulas for Calculating Colour Brightness.
rough-n-ready	My formula for giving an approximation to the gamma sRGB formula with a single line of code: brightness_value = (red_factorR^exponent + green_factorG^exponent + blue_factor*B^exponent)^(1/exponent) where R, G and B are the values for Red, Green and Blue. See also Formulas for Calculating Colour Brightness
squared	Square root using sqrt((red_factor(R^2)) + (green_factor(G^2)) + blue_factor*(B^2)) where R, G and B are the values for Red, Green and Blue.
linear	red_factorR + green_factorG + blue_factor*B where R, G and B are the values for Red, Green and Blue. This is the basic calculation often recommended for calculating brightnesss of a colour but is weak in its consistency.

unweighted

The formulas as calculated.

brightness weighted

The calculated greyscale value from the chosen formula is then converted to inverse gamma sRGB. This weights the brightness more high the higher the brightness value and gives a curved graph. Because relative brightnesses are greater the higher the brightness value this result is practical for identifying in perceptual terms how much brighter one value is than another and has practical use in determining text readability. This is described on Formulas for Calculating Colour Brightness.

like-Photoshop	red_factor 0.2235, green_factor 0.7154, blue_factor 0.0611, exponent 2.4. See Formulas for Calculating Colour Brightness. Note this will only set a value that is abolutely like Photoshop when the calculation type is set to Gamma sRGB.
Rough-n-Ready	red_factor 0.22475, green_factor 0.7154, blue_factor 0.5575, exponent 2.234. See Formulas for Calculating Colour Brightness.
XYZ	CIE XYZ coefficients of red_factor 0.2125, green_factor 0.7154, blue_factor 0.0721, (exponent 2.4 as for gamma sRGB).
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. ) coefficients of red_factor 0.299, green_factor 0.5870, blue_factor 0.114, (exponent 2.4 as for gamma sRGB).
Lgt	Lightness: ½ × (max(R,G,B) + min(R,G,B)), see Puzzling Greys.
Avg	Average:(R + G + B) ÷ 3, see Puzzling Greys.
Custom	You can try out your own permutations.

† The Steps Type boxes and buttons specify different ways to calculate brightness levels, as follows. Note that some of these difference are marginal with some colour triads, it varies.

† Steps Type Key:

Fractions	To calculate the next brightness level the code goes up or down in one hundredths of a brightness level for each of the red, green and blue elements one by one. This gives an accurate value for each of the 255 levels.
+1	To calculate the next brightness level the code goes up or down by 1 for each brightness level for each of the red, green and blue elements one by one. This method is quicker than incrementing by fractions and may not give so accurate a result, though often the difference is undiscernable.
Redistribute Excess	When, in calculating the next brightness level by adding to the previous brightness level, one of the triad is greater than 255, its excess over 255 is redistributed to the other two elements of the triad, see StackOverflow for the formula for how to do this.
Clamp	When, in calculating the next brightness level by adding to the previous brightness level, one of the triad is greater than 255, it is clamped at 255 see StackOverflow for the formula for how to do this. For certain hues this changes the hue slightly in the upper brightness ranges.