Question

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

我很难准确描述我想要的东西，但是我发现这个页面使用了我需要的确切算法：

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

如果你检查了页面，你会注意到最后3个redio按钮是：线性按Hue，线性按饱和度，线性按亮度。每个，以升序显示与原始十六进制代码对应的十六进制代码列表。

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

我需要这些公式。

提前致谢。

Answer 1

你可以从多个地方混搭。简而言之，您需要：

所选颜色的HSL值。也许这是通过将RGB转换为HSL（How do you get the hue of a #xxxxxx colour?）或您在调色板上选择它的网站获得的
现在您有3个组件（H，S和L），根据您选择的复选框，您可以开始按编辑框中给出的％值递减组件。

您将在此减量期间获取值列表，现在您将执行从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
}

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

希望这很清楚。

如何根据输入距离从所选颜色计算Hue，Saturation和Lightness值

1 个答案: