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

+3

source to share

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

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

``````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 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.)

``````var numOfShades = 20; // Set here the Desired number of Shades
var colorSELECT = document.getElementById('color');

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);
}

colorsDIV.innerHTML = ""; // Empty from old SPANS
var hue = this.value;     // The Select Value: 0->360

createSPAN("hsl("+hue+", 100%, 50%)"); // Create The selected color!

var hsl = "hsl("+hue+", "+ rand(10,90) +"%, "+rand(10, 90) +"%)";
createSPAN( hsl );
}
}

```
``````#shades > span{
display:inline-block;
margin:10px;
width:60px;
height:60px;
}```

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

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

.

+8

source

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

0

source

All Articles