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

Question

Has anyone come across a way to choose a random shade of a particular color? Sounds silly at first, but what I'm trying to do is come 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.

Answer 1

jsBin demo

The simplest way I can think of:

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° 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!

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>

---

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