hue what!

Colour Brightness Experiment
Set the base colour with the leftmost red, green and blue sliders below, this changes both panels, then use the ↑↓ slider to change brightness in the right panel. The sliders on the right show the adjusted RGB values. Do not move these, they are for information only.
↑↓ 255 255 255   Base Colour Adjusted   255 255 255
   
Base:    Adjusted:
Colour Brightness Values
Steps type †: fractions  redistribute excess 
+1  clamp 
Colour Brightness Levels : Greyscale
native   gamma sRGB   rough-n-ready
squared   linear
 
unweighted  
exponent
brightness weighted  
 
set custom like-Photoshop
Base:
0
Adj:
0
 
set custom Rough-n-Ready
Base:
0
Adj:
0
 
Base:
0
Adj:
0
 
Base:
0
Adj:
0
 
Lightness
Base:
0
Adj:
0
 
Average
Base:
0
Adj:
0
 
custom
exponent    sum factors to 1
factors: R   G   B
Base:
0
Adj:
0
 
255
200
100
Page uses cookies to remember settings from one session to the next unless disallowed. Allow cookies?
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:
NativeNative 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 sRGBThe 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-readyMy formula for giving an approximation to the gamma sRGB formula with a single line of code: brightness_value = (red_factor*R^exponent + green_factor*G^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
squaredSquare 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.
linearred_factor*R + green_factor*G + 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.
 
unweightedThe formulas as calculated.
brightness weightedThe 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-Photoshopred_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-Readyred_factor 0.22475, green_factor 0.7154, blue_factor 0.5575, exponent 2.234. See Formulas for Calculating Colour Brightness.
XYZCIE XYZ coefficients of red_factor 0.2125, green_factor 0.7154, blue_factor 0.0721, (exponent 2.4 as for gamma sRGB).
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, (exponent 2.4 as for gamma sRGB).
LgtLightness: ½ × (max(R,G,B) + min(R,G,B)), see Puzzling Greys.
AvgAverage:(R + G + B) ÷ 3, see Puzzling Greys.
CustomYou 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:
FractionsTo 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.
+1To 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 ExcessWhen, 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.
ClampWhen, 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.

 
powered by 66sys