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
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.)
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');
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 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
.
source to share
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:
source to share