What the Calculations Are Doing
One way of defining an SVG file is using CSS stylesheets. That is the way that Adobe Illustrator does it. An SVG file is a text file, so modifying the stylesheets definitions is quite straightforward.
The Javascript for this page takes each of the CSS 'fill' definitions of the input file's CSS stylesheets in turn, where the fill colour is specified as hexadecimal, and modifies them according the the criteria chosen by the radio button options.
Each 'fill' definition will give the colour of a red-green-blue triad. The first thing is to identify the brightness level of that colour, brightness ranges are calculated by the likePS formula, see
Eighteen Shades of Greyscale. The first parameter, 'Number of ranges required', species how many colours will be used for the output. Brightness levels will be expressed as a number between 0 and 255, so 255 is divided by the number of ranges required, to give an upper brightness limit number for each of the output colours.
The left column specifies whether, in a range of brightnesses, we choose the lowest, highest or middle of the range.
The middle column specifies which saturation level to choose, from the brightness level specified in the first column. For a given brightness range, there will be elements of different colour saturation, this selection gives the option for making a choice of saturation.
The right column gives a hue weighting. Any colour aside from black, white or grey will have a predominant hue. From the selection range made in the left and middle columns, this allows a further selection based upon hue.
In making these selections, for any brightness range there may not be elements of a specified saturation level or hue dominance, the code therefore has thorough fallback positions, where it chooses the closest match it can, it always chooses something, the result therefore isn’t always easy to predict.