How can I generate a list of random shades of a specific color? (such as a random shade of orange)

Can anyone find a way to pick a random shade of a specific color? Sounds silly at first, but what I'm trying to do is an automated way to generate colors in a series of charts, and those colors need to be branded. Therefore, it seems reasonable that there is a way to generate a range of color values ​​for a specific range of colors; I have some examples on the internet but no logic.

So I'm looking for a way to say: generate a list of shades of red, orange, or green, etc. “Well, what is“ green ”? Okay, maybe if I give the hexadecimal value, the library / class can determine that it is green and then generate a list of other greens, etc. So, before to display a chart, I can say, “This brand uses a color scheme that uses a lot of blues, so arbitrarily pick the series colors that are blues types.” Does this make sense? This is either in C # or in Javascript would be helpful.

I would better understand how to create it, but if some libraries already exist it would be helpful.


source to share

2 answers

jsBin demo

The simplest way I can think of is:

use colors hsl

(hue, saturation, brightness)
The range is expressed as follows:

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


Think of a hue as a 360 ° wheel . where 0 and 360 are Red , there are all others between you

enter image description here

Now you can extract 12 primary colors from this wheel , moving in 30 ° increments;

0%  : RED
30% : ORANGE
60% : YELLOW
120%: GREEN
180%: CYAN
210%: AZURE
240%: BLUE
270%: VIOLET
330%: ROSE


You can create multiple steps of lightness and saturation at random or (for example) at 20%.

Saturation : Having luma at 50% and a saturation setting at 0% will give you the exact equivalent of Pure Gray (HEX: #808080

RGB: rgb(128,128,128)

* Wiki: Medium Gray ), so think of saturation as a gray to a full color block.

Lightness , range from 0% black to 100% as white - applies to the selected color.

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

Let's add 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'); = hsl;

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{

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

<div id="shades"></div>

Run codeHide result

As a final thought, instead of having a <select>

bropdown, you could instead use a ColorWheel image (like the one I provided above), track the coordinates of the clicks, and use some simple trigonometry to get the appropriate degree that you can use as a color hsl




Here's an example game: Create a shape with a bar, label and trackball and set the max track width 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)))
                                 new RectangleF(x * stepX, y * stepY, stepX, stepY));

private void trackBar1_Scroll(object sender, EventArgs e)
    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);
        return Color.FromArgb(255, v, p, q);



  • You can also check HSL as your color space, but that doesn't make a significant difference.
  • Writing conversion functions on your own doesn't make sense, there are many of them, and most of them can be traced back to multiple origins, often on wikipedia.
  • From an artistic point of view, these colored plates are not satisfying; they go from one shade to white and black. Artistic consistency wouldn't do that. Artists don't often use black, but a darker adjacent or even opposite color.
  • So making a lib that creates interesting hue sets is doable, but not turning off saturation or brightness. It would really be an interesting project.
  • I have a similar atm project: I create gradients by adding colors to the gradient and letting the system create transitions. LinearGradientBrush is a very good tool for playing with ..

Much of what you do will depend on where you want to go.

I hope you will like it!

Here are two screenshots of the results:

enter image description hereenter image description here



All Articles