Development Pages



Colour Brightness Graph
For a colour, 256 brightnesses in chart form
The down-pointing arrow at the top of the gradations chart shows the brightness of the picked colour. The up-pointing arrow at the foot of the chart shows the selected brightness; a brightness can be selected by clicking on the chart and that colour then shows in the rightmost sample rectangle.
Brightnesses are calculated upwards and downwards from the picked colour to give 256 brightnesses. The method used is to adjust the saturation and HSV values. This is different from those methods for calculating brightness that adjust the RGB values, for with those it is nigh-on impossible to maintain the hue value in the HSV colour scheme. You can see how the satutaion and HSV value adjustments work in the Saturation and HSV Value charts below the main brightness chart. Effectively it’s a gentle slope upwards and downwards on both saturation and value from the starting point of the picked colour to 255 upwards and 0 downwards. Amazingly and for some reason this gives a perceptually smooth brightness gradation without having to adjust the hue. I don’t really understand why this works in the way it does but it does.
This method produces a graph that is not entirely a straight line for some hues, the height of each graph bar being the brightness level for that hue. I do not know why this should be – yet!
Much advice you see about adjusting brightness suggests in effect dragging the r, g and b sliders in unison and redistributing the excess where one or more of them bats up against zero or 255. That looks convincing too and produces a stright line graph, but it does change the hue at the extremities. The S and V method adjustments keep the hue value intact, which is what we want really.
Selected from Graph:
Brightness: RGB:
Brightness calculation formula:
Saturation (HSV S)
HSV Value (HSV V)

Dave Collier colour theory page . . . email me . . .