如何通过输入距离计算所选颜色的色相，饱和度和明度值

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
}

类似地，如果您希望通过饱和度来获得一组变化，那么您只需减少第二个参数/分量，而如果要改变发光度，则可以改变第三个参数。

希望这很清楚。