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

Posted 2023-02-23

【中文标题】如何生成特定颜色的随机阴影列表？ （例如橙色的随机阴影）

【英文标题】：How can I generate a list of random shades of a particular color? (e.g. random shade of orange)

【发布时间】：2014-12-04 22:25:07

【问题描述】：

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

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

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

【问题讨论】：

你需要更好地理解你真正想要什么。颜色通常是一个色相加上一个饱和度加上一个亮度。因此，您可以轻松地使用众多 HSL 到 RGB 函数之一，并为其提供饱和度和亮度的色调和随机值。事实上，将所有这些颜色绘制到 2d 正方形上很容易。问题是它们真的很无聊。当你离开色调到它的邻居时，中间的阴影就会出现。。

确实如此。像 rgb(255,255,i) 之类的东西——其中 i 设置为随机整数——会让你开始。这是一种量化形式。

【参考方案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> bropdown，跟踪点击坐标并使用一些简单的三角函数检索您对应的度数可以用作hsl 颜色。

【讨论】：

太棒了！谢谢！

【参考方案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 是一个非常不错的工具。

你会做什么取决于你想去哪里..

希望你玩得开心！

下面是两张结果截图：