|About us||RCL 20||Projects||Colour Selector||Library|
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.
The inverse colour is calculated by subtracting each component of RGB colour from 255.
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.
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.
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).
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.
Copyright © Limitless Innovations 2021