Question

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

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

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

Answer 1

<强> jsBin demo

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

使用hsl（色相，饱和度，亮度）颜色范围表示如下：

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

将 Hue 视为 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％，您将获得与纯灰色完全相同的效果（HEX： #808080 RGB：rgb(128,128,128) ^{*Wiki: Middle Gray}）因此将饱和度视为灰色到全彩的单位。

亮度，范围从0％为黑色到100％为白色 - 应用于所选颜色。

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

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

var numOfShades = 20; // Set here the Desired number of Shades var colorSELECT = document.getElementById('color'); var colorsDIV = document.getElementById('shades'); function rand(min, max){ return Math.floor(Math.random() * (max - min + 1)) + min; } function createSPAN( hsl ){ var span = document.createElement('span'); span.style.backgroundColor = hsl; colorsDIV.appendChild(span); } function generateShades(){ colorsDIV.innerHTML = ""; // Empty from old SPANS var hue = this.value; // The Select Value: 0->360 createSPAN("hsl("+hue+", 100%, 50%)"); // Create The selected color! for(var i=0; i<numOfShades; i++){ // Create shades! var hsl = "hsl("+hue+", "+ rand(10,90) +"%, "+rand(10, 90) +"%)"; createSPAN( hsl ); } } colorSELECT.onchange = generateShades;

#shades > span{ display:inline-block; margin:10px; width:60px; height:60px; 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> <div id="shades"></div>

最后的想法是，您可以改为使用colorWheel图像（就像我上面提供的那样），跟踪点击坐标并使用一些简单的三角函数检索相应的度数，而不是<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作为您的色彩空间，但它并没有产生太大的影响。
自己编写转换函数是没有意义的，有很多可以追溯到几个起源，通常在维基百科上
从艺术的角度来看，这些色板并不令人满意;它们从一个阴影变成白色和黑色。艺术序列不会这样做。艺术家不会经常使用黑色遮挡，而是使用较暗的邻近或甚至相反的颜色。
因此，编写一个创建有趣的色调集的库是可行的，但不能单独调低饱和度或亮度。这确实是一个有趣的项目。
我在一个类似的项目中：我通过向渐变添加颜色来创建渐变，让系统创建过渡。 LinearGradientBrush是一个非常好用的工具..

你所做的很多事情将取决于你想去的地方..

我希望你能玩得开心！

以下是结果的两个屏幕截图：

enter image description here

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

2 个答案:

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

2 个答案:

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