How the tool calculations are made

RGB variations

The RGB variations are achieved by adding or subtracting a percentage amount (of 255) of red, green and blue combinations to the current colour. Additive variations tend to produce lighter colours and subtractive variations darker colours.

Example of an RGB variation
R: 153 G: 204 B: 102		+ 20% magenta, which is 51 red and 51 blue.		R: 204 G: 204 B: 153

Inverse

Example of an inverse variation
R: 153 G: 204 B: 102		255-153=102 255-204=51 255-102=153		R: 102 G: 51 B: 153

The inverse colour is calculated by subtracting each component of RGB colour from 255.

HSL variations

The HSL variations are calculated by [off-site] converting the RGB colour value to HSL. Hue is specified in continuous degrees (0-360); saturation and lightness are percentages. HSL variations are made by applying the variation amounts directly.

HSL variations involve changing only one of hue, saturation and lightness. The other two values remain the same.

Example HSL variations
R: 153 G: 204 B: 102	=	H: 90° S: 51% L: 61%	+ 90° hue	H: 180° S: 51% L: 61%	=	R: 105 G: 206 B: 106

R: 153 G: 204 B: 102	=	H: 90° S: 51% L: 61%	- 30% saturation	H: 90° S: 21% L: 61%	=	R: 156 G: 176 B: 135

R: 153 G: 204 B: 102	=	H: 90° S: 51% L: 61%	+ 20% lightness	H: 90° S: 51% L: 81%	=	R: 207 G: 231 B: 182

R: 153 G: 204 B: 102	=	H: 90° S: 51% L: 61%	complement (+ 180° hue)	H: 270° S: 51% L: 61%	=	R: 156 G: 105 B: 206

Since the hue scale is a continuous circle, additions to hue resulting in a hue greater than 360° continue from 0° - that is, 360 is subtracted from the hue value (e.g., 350° + 20; = 370 then 370 - 360 = 10°). Similarly, a subtraction from hue resulting in a negative number is similarly adjusted by adding 360.

Greys have hue

[Grey swatches of increasing saturation are red]

Strictly speaking, black, white and greys have undefined hue. For the purposes of calculations in this resource, we've adopted the convention of setting hue to 0° for all greys. Black is H: 0° S: 0% L: 0% whilst white is H: 0° S: 0% L: 100% However, Hue 0° is red and so colours of hue 0° with values of greater than 0% for saturation and lightness appear red.

The effects of rounding

When making HSL variations, the resulting HSL colour value may be 1° or 1% out because of the rounding required when converting HSL values back to RGB hex. For example, if you add a percentage lightness to a colour and then remove that same amount, you may not return to the exact colour you started with.

Snap to 51

If a calculated variation of red, blue or green results in a number which is one out from 0, 51, 102, 153, 204 or 255, it will be adjusted to that number. For example, if a calculation results in the colour value 50,103,203 it will be adjusted to 51,102,204.

To explain, the choice of percentage variations result in decimal increments which may not be whole numbers (since they're a percentage of 255).
For instance:

20% of 255 is 51
10% of 255 is 25.5
5% of 255 is 12.75

Because RGB colour is stated in whole numbers, calculated variations are rounded to the nearest whole number. This rounding means that a variation of 20% (=51), say, will not be equivalent to two 10% variations (=25.5); rounding up gives 26+26=52 whilst rounding down gives 25+25=50, both 1 out from the target 51.