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

有没有人找到一种方法来选择一种特定颜色的随机色调？一开始听起来很傻，但我想做的是想出一种自动生成图表系列颜色的方法，这些颜色需要打上烙印。因此，有一种方法可以为特定的颜色范围生成一系列颜色值，这似乎是合理的；我在网上有一些例子，但没有逻辑

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

我宁愿自己理解如何构建一个，但如果已经存在任何库，这将非常有用。

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

使用

hsl

（色调、饱和度、亮度）颜色。
范围表示为：

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

将色调视为一个360°轮子，其中0和360是红色，在这两者之间，你有所有的其他颜色：

现在，您可以从该控制盘中检索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（128128128）

）完全相同的效果，因此将饱和度视为灰色到全色的单位

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

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

---

让我们把上面的内容放在一起

var numOfShades=20；//在此处设置所需的阴影数
var colorSELECT=document.getElementById（'color'）；
var colorsDIV=document.getElementById（'shades'）；
函数随机数（最小值、最大值）{
返回Math.floor（Math.random（）*（max-min+1））+min；
}
函数createSPAN（hsl）{
var span=document.createElement（'span'）；
span.style.backgroundColor=hsl；
颜色iv.追加子项（span）；
}
函数generateShades（）{
colorsDIV.innerHTML=“；//从旧跨距中为空
var hue=this.value；//选择值：0->360
createSPAN（“hsl”（“+hue+”，100%，50%）”）；//创建所选颜色！
对于（var i=0；i跨度{
显示：内联块；
利润率：10px；
宽度：60px；
高度：60px；
边界半径：5px；
}

红色
橙色
黄色的
黄绿色
绿色
绿松石
青色
蔚蓝色的
蓝色
紫罗兰色
洋红
玫瑰

下面是一个示例：创建一个包含面板、标签和轨迹栏的表单，并将轨迹栏的最大值设置为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);
}

private void panel 1_Paint（对象发送器，PaintEventArgs e）
{
浮动步长x=panel1.ClientSize.Width/100f；
浮动台阶=面板1.ClientSize.Height/100f；
对于（int y=1；y你需要更好地理解你真正想要的。一种颜色通常是一种色调加上饱和度加上亮度。因此，你可以很容易地使用许多HSL到RGB函数中的一种，并为其提供色调和随机饱和度和亮度值。事实上，在2d正方形上绘制所有这些颜色很容易。问题是它们真的很无聊。当你从色调移到相邻的色调时，中间色调就会出现。确实。像rgb（255255，i）——其中我设置了一个随机整数——会让你开始。这是一种量化形式。太好了！谢谢！