Generating Random Colours
I’ve been playing around with <canvas>
lately and have had a frequent need to generate random colours. I have written my own functions for doing this, which I now use all the time. The first function below generates a simple array of RGB
values, while the second snippet generates a hexadecimal string.
Generating RGB Values
The snippet for generating RGB
values is quite simple. We use the Math.random()
function to generate a 3-element Array
of whole numbers between 0
and 255
. It can be tricky to wrap your head around how to get a random integer between 0
and 255
using the Math.random()
function so here is an expanded version of the process.
// Decimal value between 0 and 1
var rand = Math.random();
// Decimal value between 0 and 256 exclusive
var randFloat = rand*256;
// Whole number between 0 and 255 inclusive
var randInt = Math.floor(randFloat);
We can now use this technique in our colour generation snippet.
/**
* Returns an RGB colour of the
* form [ 255, 255, 255 ]
*/
var randomColor = function() {
var c = [ ];
for (var i=0; i<3; i++) {
// Push random integer between 0 and 255
c.push(Math.floor(Math.random()*256));
}
return c;
};
As you can see, we multiply the random number by 256
to transform its range from (0, 1)
to (0, 256)
. We then make use of Math.floor()
which rounds the number down to the nearest integer, leaving a whole number with a range of [0, 255]
.
Generating a HEX Value
Hexadecimal colour strings are made up of six hexadecimal digits. Each digit can be one of fifteen possible values ranging from 0-9
or A-F
. The following snippet is similar to the first one except instead of picking a random integer between 0
and 255
it generates a random integer between 0
and 15
which is then used as an array index that maps to one of the fifteen digits.
/**
* Returns a HEX colour of the
* form "#AAAAAA"
*/
var randomColor = function() {
// Define possible hex digits
var chars = [
'0', '1', '2', '3',
'4', '5', '6', '7',
'8', '9', 'a', 'b',
'c', 'd', 'e', 'f'
];
var c = [ ];
for (var i=0; i<6; i++) {
// Choose random digit
var index = Math.floor(Math.random()*chars.length);
// Push random digit to array
c.push(chars[index]);
}
// Transform the array to the form "#AAAAAA"
return '#'+c.join('');
};
Wrap Up
And that’s it. Feel free to take these snippets and use them in your own work. If you have any questions, feel free to leave a comment below.
Happy Coding :)