2

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

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

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

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

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

我需要公式，拜托。

提前致谢。

4

1 回答 1

0

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

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

  3. 在此递减过程中，您将获得一个值列表，现在您将执行从 HSL 值到 RGB 的反向转换（HSL 到 RGB 颜色转换）。

    // 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
}

类似地，如果您想要一组饱和度变化，那么您只需减少第二个参数/分量，如果您想要改变发光度，您可以改变第三个参数。

希望这很清楚。

于 2016-06-28T01:30:26.367 回答