javascript - How can I generate a list of random shades of a particular color? (e.g. random shade of orange)

Has anyone e across a way to choose a random shade of a particular color? Sounds silly at first, but what I'm trying to do is e up with an automated way to generate chart series colors, and those colors need to be branded. So it seems reasonable that there is a way to maybe generate a range of color values for a particular color range; I've some examples on the web but not the logic.

So I'm looking for a way to say: generate a list of shades of Red, or Orange, or Green, etc. "Well, what constitutes a 'green' ?" Ok well maybe if I provide a hex value, the library/class could determine that it is a green and then generate a list of other greens, etc. So that way, before rendering the chart, I could say "This brand uses a color scheme that uses lots of blues, so randomly choose series colors that are types of blues." Does that make sense? This is in either C# or Javascript would be helpful.

I'd rather understand how to build one myself, but if any libraries already exist out there, it would be helpful.

Share asked Oct 9, 2014 at 20:53 Sinaesthetic 12.3k30 gold badges114 silver badges185 bronze badges

You will need to understand better what you actually want. A color is usually one hue plus a saturation plus a brightness. So you can easily use one of the many HSL to RGB functions and feed it with a hue and randome values for saturation and brightness. Infact it is easy to paint all those colors onto a 2d square. The problem is that they are really boring.. The intersiting shades e when you step away from the hue to its neighbours.. – TaW Commented Oct 9, 2014 at 20:58
1 Indeed. Something like rgb(255,255,i) -- where i is set with a random int -- will get you started. This is a form of quantitization. – Union find Commented Oct 9, 2014 at 21:00

Add a ment |

2 Answers 2

Sorted by: Reset to default 14

The simplest way I can think of is to:

use hsl (Hue, Saturation, Lightness) colors.
The range is expressed like:

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

Think of Hue as a 360° clockwise wheel, where 0 and 360 are Red, in between you have all the other ones:

Now you can retrieve from that wheel 12 basic colors moving by steps of 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

You can than generate some steps of lightness and saturation at random or by (i.e.) 20% steps.

Saturation: Having lightness at 50% and setting Saturation at 0% you'll get the exact equivalent of Pure Gray (HEX: #808080 RGB: rgb(128,128,128) ^{*Wiki: Middle Gray}) so think of saturation as a gray-to-full-color unit.

Lightness, range from 0% being black to 100% as white - applied to a selected color.

(Logically from the above you can conclude that lightness affects Saturation also.)

Let's put the above together!

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

As a final thought, instead of having a <select> dropdown, you could instead use a color-wheel image (like the one I've provided above), track the click coordinates and using some simple trigonometry retrieve the correspondent degree that you can than use as hsl color.

Here is an example to play with: Create a form with a panel, a label and a trackbar and set the trackbar's maximum to 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);
}

Notes:

You may also want to check out HSL as your color space, but it doesn't makes that much of a difference.
Writing conversion functions yourself makes no sense, there are many out there and most can be traced back to a few origins, often on wikipedia
From an artistic point of view these color plates are not satisfying; they go from one shade to white and black. An artitistic sequence wouldn't do that. Artists don't use black to shade often but a darker neighbouring or even opposite color.
So writing a lib that creates interesting sets of hues is doable but not by turning down satuaration or brightness alone..That would indeed be a intersting project.
I'm in a similar project atm: I create gradients by adding colors to a gradient and let the system create the transitions. The LinearGradientBrush is a very nice tool to play with..

So much of what you'll do will depend on where you want to go..

I hope you'll have fun!

Here are two screenshots of results:

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How can I generate a list of random shades of a particular color? (e.g. random shade of orange) - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)