如何生成特定颜色的随机色调列表？ （例如随机的橙色阴影）

Question

有人遇到过选择特定颜色的随机色调的方法吗？乍一听起来很愚蠢，但我想做的是提出一种自动方式来生成图表系列颜色，并且这些颜色需要进行品牌化。因此，有一种方法可以为特定颜色范围生成一系列颜色值，这似乎是合理的；我在网上有一些例子，但没有逻辑。

所以我正在寻找一种方法来表达：生成红色、橙色或绿色等色调的列表。“那么，什么构成‘绿色’？”好吧，也许如果我提供一个十六进制值，库/类可以确定它是绿色，然后生成其他绿色的列表等。这样，在渲染图表之前，我可以说“这个品牌使用了一种颜色使用大量蓝色的方案，因此随机选择属于蓝色类型的系列颜色。”这有道理吗？这在 C# 或 Javascript 中都会有帮助。

我宁愿了解如何自己构建一个，但如果已经存在任何库，那将会很有帮助。

Answer 1

我能想到的最简单的方法是：

使用

hsl

（色相、饱和度、亮度）颜色。
范围表示如下：

hsl([0-360], [0-100]%, [0-100]%)
      HUE     SATUR.    LIGHT.

将 Hue 视为 360° 顺时针轮，其中 0 和 360 是 Red，在两者之间您拥有所有 其他：

现在您可以从该轮子中检索 12 种基本颜色，以 30° 为步长移动：

0%  : RED
30% : ORANGE
60% : YELLOW
90% : CHARTREUSE GREEN
120%: GREEN
150%: TURQUOISE
180%: CYAN
210%: AZURE
240%: BLUE
270%: VIOLET
300%: MAGENTA
330%: ROSE

您可以随机或按（即）20% 的步长生成亮度和饱和度的一些步长。

饱和度：将亮度设置为 50% 并将饱和度设置为 0%，您将获得与 纯灰色 完全相同的效果（十六进制：

#808080

RGB：

rgb(128,128,128)

^{*Wiki：中灰色} ）所以将饱和度视为灰色到全色的单位。

亮度，范围从 0% 黑色到 100% 白色 - 应用于选定的颜色。

（从上面逻辑上你可以得出结论，亮度也会影响饱和度。）

---

让我们把以上内容放在一起！

// DOM Utils
const el = (sel, par = document) => par.querySelector(sel);
const elNew = (tag, prop) => Object.assign(document.createElement(tag), prop);

// Utils
const rand = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;

// TASK: Random colors shades generator
const numOfShades = 20; // Set here the Desired number of Shades
const elSelect = el("#color");
const elResult = el("#result");
const elGenerate = el("#generate");

const createShadeElement = (hsl) => {
  const elShade = elNew("span");
  elShade.style.backgroundColor = hsl;
  elResult.appendChild(elShade);
};

const generateShades = () => {
  elResult.innerHTML = "";      // Empty current results
  const hue = elSelect.value;   // The Select Value: 0->360

  createShadeElement(`hsl(${hue}, 100%, 50%)`); // Create The main color

  for(var i=0; i<numOfShades; i++){ // and create all the other shades
    const hsl = `hsl(${hue}, ${rand(10,90)}%, ${rand(10, 90)}%)`;
    createShadeElement(hsl);
  }
};

elGenerate.addEventListener("click", generateShades);
generateShades();

#result > span{
  display: inline-block;
  margin: 0.2em;
  width: 40px;
  height: 40px;
  border-radius: 5px;
}

<select id="color">
  <option value="0"> RED</option>
  <option value="30">ORANGE</option>
  <option value="60">YELLOW</option>
  <option value="90">CHARTREUSE GREEN</option>
  <option value="120">GREEN</option>
  <option value="150">TURQUOISE</option>
  <option value="180">CYAN</option>
  <option value="210">AZURE</option>
  <option value="240">BLUE</option>
  <option value="270">VIOLET</option>
  <option value="300">MAGENTA</option>
  <option value="330">ROSE</option>
</select>
<button id="generate" type="button">Regenerate</button>

<div id="result"></div>

---

最后一个想法，您可以使用色轮图像（就像我上面提供的那样），而不是使用

<select>

下拉菜单，跟踪单击坐标并使用一些简单的三角函数检索您所对应的度数。可以用作

hsl

颜色。

Answer 2

这里是一个示例：创建一个带有面板、标签和轨迹栏的表单，并将轨迹栏的最大值设置为 360。

private void panel1_Paint(object sender, PaintEventArgs e)
{
    float stepX = panel1.ClientSize.Width / 100f;
    float stepY = panel1.ClientSize.Height / 100f;

    for (int y = 1; y <=  100; y++)
    for (int x = 1; x <=  100; x++)
    {
        HSV hsv = new HSV(trackBar1.Value,  x / 100f,  y / 100f );
        using (SolidBrush brush = new SolidBrush(ColorFromHSV(hsv)))
        e.Graphics.FillRectangle(brush, 
                                 new RectangleF(x * stepX, y * stepY, stepX, stepY));
    }
}

private void trackBar1_Scroll(object sender, EventArgs e)
{
    panel1.Invalidate();
    label1.Text = trackBar1.Value.ToString() + "°";
}

public struct HSV
{
    public float h; public float s; public float v;
    public HSV(float h_, float s_, float v_) { h = h_; s = s_; v = v_; }
}


static public Color ColorFromHSV(HSV hsv)
{
    int hi = Convert.ToInt32(Math.Floor(hsv.h / 60)) % 6;
    double f = hsv.h / 60 - Math.Floor(hsv.h / 60);

    double value = hsv.v * 255;
    int v = Convert.ToInt32(value);
    int p = Convert.ToInt32(value * (1 - hsv.s));
    int q = Convert.ToInt32(value * (1 - f * hsv.s));
    int t = Convert.ToInt32(value * (1 - (1 - f) * hsv.s));

    if (hi == 0)
        return Color.FromArgb(255, v, t, p);
    else if (hi == 1)
        return Color.FromArgb(255, q, v, p);
    else if (hi == 2)
        return Color.FromArgb(255, p, v, t);
    else if (hi == 3)
        return Color.FromArgb(255, p, q, v);
    else if (hi == 4)
        return Color.FromArgb(255, t, p, v);
    else
        return Color.FromArgb(255, v, p, q);
}

备注：

• 您可能还想查看 HSL 作为您的色彩空间，但它并没有那么大的区别。
• 自己编写转换函数是没有意义的，有很多转换函数，并且大多数可以追溯到一些起源，通常在维基百科上
• 从艺术角度来看，这些彩板并不令人满意；它们从一种颜色变成白色和黑色。艺术序列不会做到这一点。艺术家不经常使用黑色来遮蔽，而是使用较暗的邻近色甚至相反的颜色。
• 因此，编写一个创建有趣的色调集的库是可行的，但不能仅通过降低饱和度或亮度来实现。这确实是一个有趣的项目。
• 我在一个类似的 atm 项目中：我通过向渐变添加颜色来创建渐变，并让系统创建过渡。 LinearGradientBrush 是一个非常好用的工具..

你要做什么很大程度上取决于你想去哪里..

希望你玩得开心！

以下是两张结果截图：