How the tool calculations are made

See also: The "web-safe" palette Tool overview Tool short-cuts Palette layouts Tool calculations

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

Variations of multiples of 20% (20%, 40%, 60%, 80%) of a "browser-safe" colour will always produce other safe colours. This is because RGB colour is specified on a scale from 0 to 255; when the scale is divided equally into 6 parts (as happens in the "safe" 216 palette), each part is 51 units (20% of 255). Thus adding any multiple of 51 to a colour in the 216 palette will result in a colour in the same palette.

Nearest safe

The "nearest safe" colour is calculated by finding the nearest number to 0, 51, 102, 153, 204 and 255 of each component of RGB colour.

Example of a nearest safe calculation
R: 130		130 is between 102 and 153		130-102=28 153-130=23 (nearer to 153)		R: 153
G: 180		180 is between 153 and 204		180-153=27 204-180=24 (nearer to 204)		G: 204
B: 120		120 is between 102 and 153		120-102=18 153-120=33 (nearer to 102)		B: 102

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. Note that the inverse of a "safe" colour is always another safe colour (255 is a multiple of 51 - subtracting any multiple of 51 from 255 will result in another multiple of 51).

HSL variations

The HSL variations are calculated by 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

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.

Therefore, snapping calculated numbers that are one point away from a multiple of 51 means that repeated transformations in the same direction (e.g., +10% green then +10% green) will result in a safe colour when starting from a safe colour.