如何通过输入距离从所选颜色计算色相、饱和度和亮度值

Question

给定一个起始十六进制代码，我想知道以升序和降序计算亮度线性值的数学。色相和饱和度也一样。

我很难准确地描述我想要什么，幸运的是我发现这个页面使用了我需要的确切算法：

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

如果您检查该页面，您会注意到最后 3 个重做按钮显示为：色相线性、饱和度线性、亮度线性。每个，都为您提供了一个与原始十六进制代码相对应的升序十六进制代码列表。

例如，对于亮度，他们给出了以下列表（来自颜色 FFCE2E）： FFCE2E FFDA61 FFE694 FFF2C7 FFFEFA

我需要公式。

提前致谢。

Answer 1

您可以从多个地方将其混合在一起。简而言之，您需要：

1. 所选颜色的 HSL 值。也许这是通过将 RGB 转换为 HSL (How do you get the hue of a #xxxxxx colour?) 或在网站上您只需在调色板上选择它来获得的
2. 现在您有了 3 个分量（H、S 和 L），根据您选择的复选框，您开始按编辑框中给出的 % 值递减分量。

3. 您将在此递减过程中获得一个值列表，现在您将执行从 HSL 值到 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
   }
   

同样，如果您想通过饱和度进行一组变化，那么您只需减少第二个参数/分量，如果您想改变发光度，您可以改变第三个参数。

希望这很清楚。