I am creating pie charts with chart.js, when creating the chart I generate random colors with the following function:
getRandomColor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
However, this generates the color without any type of filter, I want to generate only bright colors, avoiding gray, black or dull, how could I filter or improve the existing function?
function getRandomColor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
var str = "<div style='background-color:"+color+"'><button id='b1'>hola</button></div>"
document.write(str);
return color;
}
console.log(getRandomColor());
To obtain vivid and bright colors to paint the graphs we can base ourselves on the following facts:
The spectrum of bright colors is as follows:
The colors in this spectrum are characterized by the fact that in their composition, one of the 3 primary colors is at its maximum value (FF), another at its minimum (00) and the other varies between the minimum and maximum value.
Therefore the HTML code of a vivid color can be represented as the permutation of 3 characters (FF, 00 and another random).
To simulate these permutations we can establish the character array as follows:
'0' and 'F' can be used instead of '00' and 'FF' since an HTML color can also be represented with 3 characters, then the value of
num
will vary between 0,4,8 and C hexadecimal (do this separation so that there is more contrast between the colors).Then we get the permutation by drawing a random character from the array to add it to the string
color
:We can store the colors that have already been used in an array to avoid repetition with the following lines:
In this way the code is as follows, in this example 20 different bright colors are generated randomly:
And in this way, striking colors can be generated, avoiding dull colors, grays, whites and blacks, greetings.
I CAN THINK OF ANOTHER SOLUTION: Using the generation of hexadecimal numbers I find it difficult to try to filter through a rule that generates pastel or light colors.
The other way to solve the problem is to use the RGB color generation here you can make an individual random generator for the three channels and limit the range of the number generated by the high and low values (between 120 to 240) to avoid the colors dark.
Here is the new code:
pressing the color button clones a new div and generates another color, the cloned div has a title to identify its color
rgb()
The gray colors have the characteristic that they have the same value in the 3 RGB channels, for example
Black colors are obtained when the 3 channels have values close to zero and white colors when the values are close to 255.
In your case, the values are hexadecimal, so we divide the channels into values that go from #000000(black) to #FFFFFF(white), each pair of values corresponds to a channel, however we can work with values of a # 000 to #FFF, which is an almost equivalent form although with a reduced number of possibilities (combinations).
Now we just have to avoid that the 3 channels are equal to or close to white or black:
I only do the comparison on the last value because it doesn't matter if there are two equal channels, it only matters that the 3 are not equal, so you just have to avoid that the third has already been repeated.
I think the answer should go in the direction of using HSV instead of RGB.
In HSV a color is identified by three numbers, each between 0 and 1, the first being the "hue" (the "tone", or what we would simply call "color", which is what differentiates a red from a green, for example), the second the saturation (the higher the more "pure" that color is, and the lower it is, the more it mixes with white and becomes more "pastel", becoming gray at low saturations) and the third is the value, or luminosity (if it approaches 0 it shoots black, and if it approaches 1, it throws the corresponding color).
Using this scheme, you get "vivid" colors by simply setting 1 to saturation and 1 to value. Playing with different values for the "hue", you get the different colors, and they would all be "live". If you want them more "pastel", change the saturation to 0.5 for example.
Here is an example of a function that converts from the HSV model to RGB and a loop that iterates through different "hues" to generate the different colors. It prints them in hexadecimal through the console and incidentally paints them on a canvas for you to see.