How to calculate Hue, Saturation and Lightness values from a chosen color by input distance

Question

Given a starting hex code, I would like to know the maths to calculate the linear values of lightness in ascending and descending order. Same for Hue and Saturation.

It's kinda difficult for me to describe exactly what i want, forutnately i've found this page which make use of the exact algorithms i need:

http://www.workwithcolor.com/hsl-color-schemer-01.htm

If you checked the page you noticed that the last 3 redio buttons read: Linear by Hue, Linear by Saturation, Linear by Lightness. Each, gives you a list of hex codes in ascending order that correspond to the original hex code.

For example, for the lightness they give the following list (from color FFCE2E): FFCE2E FFDA61 FFE694 FFF2C7 FFFEFA

I need the formulas, please.

Thanks in advance.

Answer 1

You can mash this up from multiple places. In a nutshell you need:

1. The HSL value of your picked color. Maybe this is obtained by converting an RGB to HSL (How do you get the hue of a #xxxxxx colour?) or on the website you just pick it on a palette
2. Now you have the 3 component (H, S, and L) and depending on which checkbox you choose, you start to decrement the component by the % value given in the edit box.

3. You'll obtain a list of values during this decrement and you'll now do a reverse conversion from the HSL value to the RGB (HSL to RGB color conversion).

   // I gonna use rgbToHsl and hslToRgb from https://stackoverflow.com/questions/2353211/hsl-to-rgb-color-conversion
   var initialRGB = [ir, ig, ib];
   var initialHSL = rgbToHsl(initialRGB[0], initialRGB[1], initialRGB[2]);
   var howManyVariants = 4;
   var decrementPercent = 0.1;  // 10%
   // This example is for hue change
   var decrement = initialHSL[0] * decrementPercent;
   for (var i = 0; i < howManyVariants; i++) {
     // Linear decrementation
     var nextHue = initialHSL[0] - i * decrement;
     var nextColor = hslToRgb(nextHue, initialHSL[1], initialHSL[2]);
     // visualize somehow
   }
   

Similarly, if you want to have a set of variation by saturation then you decrement only the second parameter/component, and if you want vary luminescence, you vary the 3rd parameter.

Hope this is clear.