Random color generator
JavascriptRandomColorsJavascript Problem Overview
Given this function, I want to replace the color with a random color generator.
document.overlay = GPolyline.fromEncoded({
color: "#0000FF",
weight: 10,
points: encoded_points,
zoomFactor: 32,
levels: encoded_levels,
numLevels: 4
});
How can I do it?
Javascript Solutions
Solution 1 - Javascript
Use getRandomColor() in place of "#0000FF":
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function setRandomColor() {
$("#colorpad").css("background-color", getRandomColor());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="colorpad" style="width:300px;height:300px;background-color:#000">
</div>
<button onclick="setRandomColor()">Random Color</button>
Solution 2 - Javascript
I doubt anything will be faster or shorter than this one:
"#" + ((1<<24)*Math.random() | 0).toString(16)
Challenge!
Solution 3 - Javascript
Here is another take on this problem.
My goal was to create vibrant and distinct colors. To ensure the colors are distinct I avoid using a random generator and select "evenly spaced" colors from the rainbow.
This is perfect for creating pop-out markers in Google Maps that have optimal "uniqueness" (that is, no two markers will have similar colors).
/**
* @param numOfSteps: Total number steps to get color, means total colors
* @param step: The step number, means the order of the color
*/
function rainbow(numOfSteps, step) {
// This function generates vibrant, "evenly spaced" colours (i.e. no clustering). This is ideal for creating easily distinguishable vibrant markers in Google Maps and other apps.
// Adam Cole, 2011-Sept-14
// HSV to RBG adapted from: http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript
var r, g, b;
var h = step / numOfSteps;
var i = ~~(h * 6);
var f = h * 6 - i;
var q = 1 - f;
switch(i % 6){
case 0: r = 1; g = f; b = 0; break;
case 1: r = q; g = 1; b = 0; break;
case 2: r = 0; g = 1; b = f; break;
case 3: r = 0; g = q; b = 1; break;
case 4: r = f; g = 0; b = 1; break;
case 5: r = 1; g = 0; b = q; break;
}
var c = "#" + ("00" + (~ ~(r * 255)).toString(16)).slice(-2) + ("00" + (~ ~(g * 255)).toString(16)).slice(-2) + ("00" + (~ ~(b * 255)).toString(16)).slice(-2);
return (c);
}
If you wish to see what this looks like in action see Simple JavaScript Rainbow Color Generator for Google Map Markers.
Solution 4 - Javascript
Who can beat it?
'#' + Math.random().toString(16).substr(-6);
It is guaranteed to work all the time: http://jsbin.com/OjELIfo/2/edit
Based on eterps's comment, the code above can still generate shorter strings if the hexadecimal representation of the random color is very short (0.730224609375 => 0.baf).
This code should work in all cases:
function makeRandomColor(){
var c = '';
while (c.length < 7) {
c += (Math.random()).toString(16).substr(-6).substr(-1)
}
return '#' + c;
}
Solution 5 - Javascript
You can also use HSL available on every good browser (http://caniuse.com/#feat=css3-colors)
function randomHsl() {
return 'hsla(' + (Math.random() * 360) + ', 100%, 50%, 1)';
}
This will give you only bright colors, you can play around with the brightness, saturation and alpha.
// es6
const randomHsl = () => `hsla(${Math.random() * 360}, 100%, 50%, 1)`
Solution 6 - Javascript
There is no need for a hash of hexadecimal letters. JavaScript can do this by itself:
function get_random_color() {
function c() {
var hex = Math.floor(Math.random()*256).toString(16);
return ("0"+String(hex)).substr(-2); // pad with zero
}
return "#"+c()+c()+c();
}
Solution 7 - Javascript
I like this one: '#' + (Math.random().toString(16) + "000000").substring(2,8)
Solution 8 - Javascript
Random color generation with brightness control:
function getRandColor(brightness){
// Six levels of brightness from 0 to 5, 0 being the darkest
var rgb = [Math.random() * 256, Math.random() * 256, Math.random() * 256];
var mix = [brightness*51, brightness*51, brightness*51]; //51 => 255/5
var mixedrgb = [rgb[0] + mix[0], rgb[1] + mix[1], rgb[2] + mix[2]].map(function(x){ return Math.round(x/2.0)})
return "rgb(" + mixedrgb.join(",") + ")";
}
Solution 9 - Javascript
The article written by Paul Irish, Random Hex Color Code Generator in JavaScript, is absolutely amazing. Use:
'#' + Math.floor(Math.random()*16777215).toString(16).padStart(6, '0');
Thanks to Haytam for sharing the padStart to solve the hexadecimal code length issue.
Solution 10 - Javascript
If you're a noob like me, clueless about hexadecimals and such, this might be more intuitive.
function r() { return Math.floor(Math.random() * 255) }
var color = 'rgb(' + r() + "," + r() + "," + r() + ')';
You just need to end up with a string such as 'rgb(255, 123, 220)'
Solution 11 - Javascript
'#'+Math.random().toString(16).slice(-3) // three-numbers format aka #f3c
'#'+Math.random().toString(16).slice(-6) // six-number format aka #abc123
Solution 12 - Javascript
Use:
function random_color(format)
{
var rint = Math.round(0xffffff * Math.random());
switch(format)
{
case 'hex':
return ('#0' + rint.toString(16)).replace(/^#0([0-9a-f]{6})$/i, '#$1');
break;
case 'rgb':
return 'rgb(' + (rint >> 16) + ',' + (rint >> 8 & 255) + ',' + (rint & 255) + ')';
break;
default:
return rint;
break;
}
}
Updated version:
function random_color( format ){
var rint = Math.floor( 0x100000000 * Math.random());
switch( format ){
case 'hex':
return '#' + ('00000' + rint.toString(16)).slice(-6).toUpperCase();
case 'hexa':
return '#' + ('0000000' + rint.toString(16)).slice(-8).toUpperCase();
case 'rgb':
return 'rgb(' + (rint & 255) + ',' + (rint >> 8 & 255) + ',' + (rint >> 16 & 255) + ')';
case 'rgba':
return 'rgba(' + (rint & 255) + ',' + (rint >> 8 & 255) + ',' + (rint >> 16 & 255) + ',' + (rint >> 24 & 255)/255 + ')';
default:
return rint;
}
}
Solution 13 - Javascript
Here's a twist on the solution provided by @Anatoliy.
I needed to generate only light colours (for backgrounds), so I went with three letter (#AAA) format:
function get_random_color() {
var letters = 'ABCDE'.split('');
var color = '#';
for (var i=0; i<3; i++ ) {
color += letters[Math.floor(Math.random() * letters.length)];
}
return color;
}
Solution 14 - Javascript
There are so many ways you can accomplish this. Here's some I did:
Short one-liner, guaranteed valid colors
'#'+(Math.random().toString(16)+'00000').slice(2,8)
Generates six random hex digits (0-F)
function randColor() {
for (var i=0, col=''; i<6; i++) {
col += (Math.random()*16|0).toString(16);
}
return '#'+col;
}
// ES6 one-liner version
[..."000000"].map(()=>Math.random().toString(16)[2]).join("")
Generates individual HEX components (00-FF)
function randColor2() {
var r = ('0'+(Math.random()*256|0).toString(16)).slice(-2),
g = ('0'+(Math.random()*256|0).toString(16)).slice(-2),
b = ('0'+(Math.random()*256|0).toString(16)).slice(-2);
return '#' +r+g+b;
}
Over-engineered hex string (XORs 3 outputs together to form color)
function randColor3() {
var str = Math.random().toString(16) + Math.random().toString(16),
sg = str.replace(/0./g,'').match(/.{1,6}/g),
col = parseInt(sg[0], 16) ^
parseInt(sg[1], 16) ^
parseInt(sg[2], 16);
return '#' + ("000000" + col.toString(16)).slice(-6);
}
Solution 15 - Javascript
map
always returns a valid RGB color:
`rgb(${[1,2,3].map(x=>Math.random()*256|0)})`
let c= `rgb(${[1,2,3].map(x=>Math.random()*256|0)})`
console.log(c);
document.body.style.background=c
Solution 16 - Javascript
The top voted comment of the top answer suggests that Martin Ankerl's approach is better than random hex numbers, and although I haven't improved on Ankerl's methodology, I have successfully translated it to JavaScript.
I figured I'd post an additional answer to this already mega-sized Stack Overflow question because the top answer has another comment linking to a Gist with the JavaScript implementation of Ankerl's logic and that link is broken (404). If I had the reputation, I would have simply commented the jsbin link I created.
// Adapted from
// http://jsfiddle.net/Mottie/xcqpF/1/light/
const rgb2hex = (rgb) => {
return (rgb && rgb.length === 3) ? "#" +
("0" + parseInt(rgb[0],10).toString(16)).slice(-2) +
("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
("0" + parseInt(rgb[2],10).toString(16)).slice(-2) : '';
}
// The next two methods are converted from Ruby to JavaScript.
// It is sourced from http://martin.ankerl.com/2009/12/09/how-to-create-random-colors-programmatically/
// # HSV values in [0..1[
// # returns [r, g, b] values from 0 to 255
const hsv_to_rgb = (h, s, v) => {
const h_i = Math.floor(h*6)
const f = h*6 - h_i
const p = v * (1 - s)
const q = v * (1 - (f * s))
const t = v * (1 - (1 - f) * s)
let r, g, b
switch(h_i) {
case(0):
[r, g, b] = [v, t, p]
break
case(1):
[r, g, b] = [q, v, p]
break
case(2):
[r, g, b] = [p, v, t]
break
case(3):
[r, g, b] = [p, q, v]
break
case(4):
[r, g, b] = [t, p, v]
break
case(5):
[r, g, b] = [v, p, q]
break
}
return [Math.floor(r * 256), Math.floor(g * 256), Math.floor(b * 256)]
}
// # Use the golden ratio
const golden_ratio_conjugate = 0.618033988749895
let h = Math.random() // # Use a random start value
const gen_hex = (numberOfColors) => {
const colorArray = []
while (numberOfColors > 0) {
h += golden_ratio_conjugate
h %= 1
colorArray.push(rgb2hex(hsv_to_rgb(h, 0.99, 0.99)))
numberOfColors -= 1
}
console.log(colorArray)
return colorArray
}
gen_hex(100)
Solution 17 - Javascript
regexp
always returns a valid hex 6-digit color
"#xxxxxx".replace(/x/g, y=>(Math.random()*16|0).toString(16))
let c= "#xxxxxx".replace(/x/g, y=>(Math.random()*16|0).toString(16));
console.log(c);
document.body.style.background=c
Solution 18 - Javascript
A short answer with padding to the exact size:
'#' + ((1<<24)*(Math.random()+1)|0).toString(16).substr(1)
Solution 19 - Javascript
var color = "#";
for (k = 0; k < 3; k++) {
color += ("0" + (Math.random()*256|0).toString(16)).substr(-2);
}
A breakdown of how this works:
Math.random()*256 gets a random (floating point) number from 0 to 256 (0 to 255 inclusive)
Example result: 116.15200161933899
Adding the |0 strips off everything after the decimal point.
Ex: 116.15200161933899 -> 116
Using .toString(16) converts this number to hexadecimal (base 16).
Ex: 116 -> 74
Another ex: 228 -> e4
Adding "0" pads it with a zero. This will be important when we get the substring, since our final result must have two characters for each color.
Ex: 74 -> 074
Another ex: 8 -> 08
.substr(-2) gets just the last two characters.
Ex: 074 -> 74
Another ex: 08 -> 08 (if we hadn't added the "0", this would have produced "8" instead of "08")
The for loop runs this loop three times, adding each result to the color string, producing something like this:
#7408e4
Solution 20 - Javascript
So whilst all the answers here are good I wanted a bit more control over the output. For instance I'd like to prevent any near white shades, whilst ensuring I get bright vibrant colours not washed out shades.
function generateColor(ranges) {
if (!ranges) {
ranges = [ [150,256],
[0, 190],
[0, 30]
];
}
var g = function() {
//select random range and remove
var range = ranges.splice(Math.floor(Math.random()*ranges.length), 1)[0];
//pick a random number from within the range
return Math.floor(Math.random() * (range[1] - range[0])) + range[0];
}
return "rgb(" + g() + "," + g() + "," + g() +")";
};
So now I can specify 3 arbitrary ranges to pick rgb values from. You can call it with no arguments and get my default set which will usually generate a quite vibrant colour with once obvious dominant shade, or you can supply your own array of ranges.
Solution 21 - Javascript
You could use this simple function
function getRandomColor(){
var color = "#" + (Math.random() * 0xFFFFFF << 0).toString(16);
return color;
}
Solution 22 - Javascript
For decent randomness.
Random color
`#${crypto.getRandomValues(new Uint32Array(1))[0].toString(16).padStart(8, 0).slice(-6)}`
Random alpha, random color.
`#${crypto.getRandomValues(new Uint32Array(1))[0].toString(16).padStart(8, 0)}`
Solution 23 - Javascript
Yet another random color generator:
var randomColor;
randomColor = Math.random() * 0x1000000; // 0 < randomColor < 0x1000000 (randomColor is a float)
randomColor = Math.floor(randomColor); // 0 < randomColor <= 0xFFFFFF (randomColor is an integer)
randomColor = randomColor.toString(16); // hex representation randomColor
randomColor = ("000000" + randomColor).slice(-6); // leading zeros added
randomColor = "#" + randomColor; // # added
Solution 24 - Javascript
Array.prototype.reduce makes it very clean.
["r", "g", "b"].reduce(function(res) {
return res + ("0" + ~~(Math.random()*256).toString(16)).slice(-2)
}, "#")
It needs a shim for old browsers.
Solution 25 - Javascript
Use distinct-colors.
It generates a palette of visually distinct colors.
distinct-colors is highly configurable:
- Choose how many colors are in the palette
- Restrict the hue to a specific range
- Restrict the chroma (saturation) to a specific range
- Restrict the lightness to a specific range
- Configure general quality of the palette
Solution 26 - Javascript
function get_random_color() {
return "#" + (Math.round(Math.random() * 0XFFFFFF)).toString(16);
}
Solution 27 - Javascript
I wanted to create very distinctive and vibrant colors (for graphing). For anything serious, hsl is a better method than rgb. If necessary, you can convert hsl to rgb as already mentioned by others.
Simple way:
- Create a random Hue from 0 to 360
- Create a random Saturation from 0.5 to 1 (or 50 to 100) for vividness
- Fix Lightness to 50% for best visibility.
color_generator = () => hsl (360*Math.random(), 0.5 + Math.random()/2, 0.5)
modified way
It creates a very nice spectrum of bright and vivid colors but the problem is that in usual color spectrum red, green, blue shades are way more dominant than yellow, cyan, and purple. So, I transformed the hue through acos function. The technical reason is very boring, so I skip it but you can dig in wiki.
color_generator = () => {
let color_section = Math.floor(Math.random()/0.33) // there are three section in full spectrum
let transformed_hue = Math.acos(2*Math.random() - 1)/3.14 // transform so secondary colors would be as dominant as the primary colors
let hue = 120*color_section + 120*transformed_hue
return hsl(hue, 0.5 + Math.random()/2, 0.5)
}
The result is the best color spectrum I had after experimenting with many other methods.
References:
Solution 28 - Javascript
This function goes above and beyond other answers in two ways:
It attempts to generate colors as distinct as possible by finding which color out of 20 tries has the farthest Euclidean distance from the others in the HSV cone.
It allows you to restrict the hue, saturation, or value range, but it still attempts to pick colors as distinct as possible within that range.
It's not super efficient, but for reasonable values (who could even pick apart 100 colors easily?) It's fast enough.
/**
* Generates a random palette of HSV colors. Attempts to pick colors
* that are as distinct as possible within the desired HSV range.
*
* @param {number} [options.numColors=10] - the number of colors to generate
* @param {number[]} [options.hRange=[0,1]] - the maximum range for generated hue
* @param {number[]} [options.sRange=[0,1]] - the maximum range for generated saturation
* @param {number[]} [options.vRange=[0,1]] - the maximum range for generated value
* @param {number[][]}[options.exclude=[[0,0,0],[0,0,1]]] - colors to exclude
*
* @returns {number[][]} an array of HSV colors (each HSV color
* is a [hue, saturation, value] array)
*/
function randomHSVPalette(options) {
function random(min, max) {
return min + Math.random() * (max - min);
}
function HSVtoXYZ(hsv) {
var h = hsv[0];
var s = hsv[1];
var v = hsv[2];
var angle = h * Math.PI * 2;
return [Math.sin(angle) * s * v,
Math.cos(angle) * s * v,
v];
}
function distSq(a, b) {
var dx = a[0] - b[0];
var dy = a[1] - b[1];
var dz = a[2] - b[2];
return dx * dx + dy * dy + dz * dz;
}
if (!options) {
options = {};
}
var numColors = options.numColors || 10;
var hRange = options.hRange || [0, 1];
var sRange = options.sRange || [0, 1];
var vRange = options.vRange || [0, 1];
var exclude = options.exclude || [[0, 0, 0], [0, 0, 1]];
var points = exclude.map(HSVtoXYZ);
var result = [];
while (result.length < numColors) {
var bestHSV;
var bestXYZ;
var bestDist = 0;
for (var i = 0; i < 20; i++) {
var hsv = [random(hRange[0], hRange[1]), random(sRange[0], sRange[1]), random(vRange[0], vRange[1])];
var xyz = HSVtoXYZ(hsv);
var minDist = 10;
points.forEach(function(point) {
minDist = Math.min(minDist, distSq(xyz, point));
});
if (minDist > bestDist) {
bestHSV = hsv;
bestXYZ = xyz;
bestDist = minDist;
}
}
points.push(bestXYZ);
result.push(bestHSV);
}
return result;
}
function HSVtoRGB(hsv) {
var h = hsv[0];
var s = hsv[1];
var v = hsv[2];
var i = ~~(h * 6);
var f = h * 6 - i;
var p = v * (1 - s);
var q = v * (1 - f * s);
var t = v * (1 - (1 - f) * s);
v = ~~(255 * v);
p = ~~(255 * p);
q = ~~(255 * q);
t = ~~(255 * t);
switch (i % 6) {
case 0: return [v, t, p];
case 1: return [q, v, p];
case 2: return [p, v, t];
case 3: return [p, q, v];
case 4: return [t, p, v];
case 5: return [v, p, q];
}
}
function RGBtoCSS(rgb) {
var r = rgb[0];
var g = rgb[1];
var b = rgb[2];
var rgb = (r << 16) + (g << 8) + b;
return '#' + ('000000' + rgb.toString(16)).slice(-6);
}
Solution 29 - Javascript
Almost all of the previous short hand methods are generating invalid hex codes (five digits). I came across a similar technique only without that issue here:
"#"+(((1+Math.random())*(1<<24)|0).toString(16)).substr(-6)
Test
Try this in the console:
for(i = 0; i < 200; i++) {
console.log("#"+(((1+Math.random())*(1<<24)|0).toString(16)).substr(-6));
}
Solution 30 - Javascript
My version:
function RandomColor() {
var hex = (Math.round(Math.random()*0xffffff)).toString(16);
while (hex.length < 6) hex = "0" + hex;
return hex;
}
Solution 31 - Javascript
A bit enhanced one-liner to make the approach more vivid
'#' + Math.round((0x1000000 + 0xffffff * Math.random())).toString(16).slice(1)
Solution 32 - Javascript
You should use '#'+Math.floor(Math.random()*16777215).toString(16); for a random color code.
Your thinking, but why 16777215? Check this article: Generate a random color with a single line of JavaScript code
function generateRandomColor()
{
var randomColor = '#'+Math.floor(Math.random()*16777215).toString(16);
if(randomColor.length != 7){ // In any case, the color code is invalid
randomColor = generateRandomColor();
}
return randomColor;
// The random color will be freshly served
}
document.body.style.backgroundColor = generateRandomColor() // -> #E1AC94
Solution 33 - Javascript
To have the same "random" colors each run instead of using Math.random you can use, for example, Mulberry32 algorithm.
Here is the demo that prints lines with a random color with using mulberry32 which uses the seed value from the input element.
To get a random color value I use a HLS "generator". Which in additional to the random "H" (hue) value (360 colors total) uses the random "L" (lightness) value (from "40 %" to "60 %"). Also each next "H" value is differ at least by 10 to prevent too similar adjacent colors.
function hlsGen(seed) {
if (isNaN(seed)) {
seed = 0;
}
const random = mulberry32(seed);
let preH = 0;
function getH() {
while (true) {
const newH = random() * 360;
if (Math.abs(preH - newH) > 10) {
preH = newH;
return newH;
}
}
}
return function() {
const H = getH();
const L = (40 + random() * 20) + "%";
return `hsl(${H}, 100%, ${L})`;
};
}
function mulberry32(seed = Date.now()) {
return function() {
let x = seed += 0x6D2B79F5;
x = Math.imul(x ^ x >>> 15, x | 1);
x ^= x + Math.imul(x ^ x >>> 7, x | 61);
return ((x ^ x >>> 14) >>> 0) / 4294967296;
}
}
// --- The example code ---
const input = document.createElement("input");
document.body.append(input);
input.addEventListener("input", () => {
const seed = Number(input.value);
const nextHls = hlsGen(seed);
document.querySelectorAll("div").forEach(div => div.remove());
for (let i = 0; i < 20; i++) {
const style = `border-left: 10px solid ${nextHls()};`;
document.body.insertAdjacentHTML("beforeend", `<div style="${style}">${i}</div>`);
}
});
input.value = 100;
input.dispatchEvent(new Event("input"));
Solution 34 - Javascript
Here are my two versions for a random hex code generator.
/* Slowest but shortest. */
"#000000".replace(/0/g,function(){return (~~(Math.random()*16)).toString(16);});
/* Good performance with small size. */
"#"+(function(a,b){while(a--){b+=""+(~~(Math.random()*16)).toString(16);} return b;})(6,"");
/* Remy Sharp provided one that's the fastest but a little bit too long /
(function(h){return '#000000'.substr(0,7-h.length)+h})((~~(Math.random()(1<<24))).toString(16))
/* Remy Sharp provided one that's the fastest but a little bit too long /
(function(h){return '#000000'.substr(0,7-h.length)+h})((~~(Math.random()(1<<24))).toString(16))
Solution 35 - Javascript
Just because I can, I created an unreadable snippet that randomizes between min and max hex codes...:
function a(f, s){
if(!s || !s.length > 1) return "";
var c = Math.floor(Math.random()*(parseInt("0x" + s.substr(0,2))-parseInt("0x" + f.substr(0,2))+1)+parseInt("0x" + f.substr(0,2))).toString(16);
return (Array(3 - c.length).join("0")) + c + a(f.substr(2,f.length),s.substr(2,s.length));
}
a("990099","ff00ff") → might randomize → b5009e
It does it in pairs, so a("12","f2") → might randomize → 8f.
But it won't go above 'f2'.
var color = "#" + a("11","22") + a("33","44") + a("55","66");
It is the same as:
var color = "#" + a("113355","224466")
But slower.
Solution 36 - Javascript
You can use colorchain.js to generate a sequence of colors with varying hues.
Solution 37 - Javascript
This code (Mohsen's) can't generate colors like #fcfc80.
'#' + Math.random().toString(16).substr(-6);
Nicolas Buduroi's one works unless Math.random() returns 0, reasonable.
'#' + (Math.random().toString(16) + "000000").substring(2,8)
This code generates lots of illegal colors (like #abcde).
'#' + Math.floor(Math.random()*16777215).toString(16);
And I keep using (+1 or anthing is also fine, but I'm used to +2 for no reason)
"#" + ((Math.random()+2)*16777216|0).toString(16).slice(1)
Solution 38 - Javascript
This method will get a random number, convert it to a hexidecimal string and then extract a part of it, giving you a random hex.
function randomColor() {
return "#" + Math.random().toString(16).slice(2,8);
}
Solution 39 - Javascript
Using ES6's Array.from() method, I created this solution:
function randomColor() {
return "#"+ Array.from({length: 6},()=> Math.floor(Math.random()*16).toString(16)).join("");
}
The other implementations I've seen need to ensure that if the hexadecimal value has leading zeros, the number still contains six digits.
K._'s answer used ES6's padStart for this:
function randomColor() {
return `#${Math.floor(Math.random() * 0x1000000).toString(16).padStart(6, 0)}`
}
The other good single-line solution I've seen is
function randomColor() {
return '#'+ ('000000' + (Math.random()*0xFFFFFF<<0).toString(16)).slice(-6);
}
Solution 40 - Javascript
There is no need to use JavaScript to generate a random CSS color.
For example, in SCSS/Sass you can use something like this:
.rgb-color-selector {
background-color: rgb(random(255), random(255), random(255));
}
or
.hsl-color-selector {
color: hsl(random(360) * 1deg, floor(random() * 100%), floor(random() * 100%));;
}
Solution 41 - Javascript
This one generates only saturated colors
let randomSaturatedColor = () => {
let r = Math.random().toString(16).slice(2, 4)
let value_012345 = Math.random().toString(6).slice(2, 3)
let hex = {
[0]: `${r}00FF`,
[1]: `00${r}FF`,
[2]: `00FF${r}`,
[3]: `${r}FF00`,
[4]: `FF${r}00`,
[5]: `FF00${r}`,
}[value_012345]
return '#' + hex
}
Solution 42 - Javascript
I think the first response is the most succinct/useful, but I just wrote one that would probably be easier for a beginner to understand.
function randomHexColor(){
var hexColor=[]; //new Array()
hexColor[0] = "#"; //first value of array needs to be hash tag for hex color val, could also prepend this later
for (i = 1; i < 7; i++)
{
var x = Math.floor((Math.random()*16)); //Tricky: Hex has 16 numbers, but 0 is one of them
if (x >=10 && x <= 15) //hex:0123456789ABCDEF, this takes care of last 6
{
switch(x)
{
case 10: x="a"
break;
case 11: x="b"
break;
case 12: x="c"
break;
case 13: x="d"
break;
case 14: x="e"
break;
case 15: x="f"
break;
}
}
hexColor[i] = x;
}
var cString = hexColor.join(""); //this argument for join method ensures there will be no separation with a comma
return cString;
}
Solution 43 - Javascript
You can try this. It's an absolutely random and comfortable color generator ))
var Color = '#';
var myElement;
for (var i = 0; i < 6; i++) {
function Random1(from, to) {
return Math.floor((Math.random() * (70 - 65 + 1)) + 65);
}
function Random2(from, to) {
return Math.floor((Math.random() * (1 - 0 + 1)) + 0);
}
function Random3(from, to) {
return Math.floor((Math.random() * (9 - 0 + 1)) + 0);
}
if (Random2()) {
myElement = Random3();
}
else {
myElement = String.fromCharCode(Random1());
}
Color += myElement;
}
Solution 44 - Javascript
function getRandomColor()
{
var color = "#";
for (var i = 0; i < 3; i++)
{
var part = Math.round(Math.random() * 255).toString(16);
color += (part.length > 1) ? part : "0" + part;
}
return color;
}
Solution 45 - Javascript
Many answers make more calls than necessary to Math.random(). Or they hope that the hex representation of that number, will have six characters.
First multiply the random float to be in the range [0, 0xffffff + 1). Now our number has the form 0xRRRRRR and some change, which is a number with 24 significant bits. Read off four bits at a time, and use that random number [0, 15] and convert it to its matching hexadecimal character in lookup.
function randomColor() {
var lookup = "0123456789abcdef";
var seed = Math.random() * 0x1000000;
return (
"#" +
lookup[(seed & 0xf00000) >> 20] +
lookup[(seed & 0x0f0000) >> 16] +
lookup[(seed & 0x00f000) >> 12] +
lookup[(seed & 0x000f00) >> 8] +
lookup[(seed & 0x0000f0) >> 4] +
lookup[seed & 0x00000f]
);
};
Solution 46 - Javascript
Possibly the simplest
'#' + Math.random().toString(16).substring(9)
Solution 47 - Javascript
Use this:
// RGBA()
function getRandomRGBA() {
function numbers() {
var x = Math.floor(Math.random() * 256);
return x;
}
alpha = 1.0;
return (
"rgba(" +
numbers() +
", " +
numbers() +
", " +
numbers() +
", " +
alpha.toFixed(1) +
")"
);
}
Solution 48 - Javascript
There are a variety of methods for creating random hex color codes in the blog post Random hex color code generator in JavaScript. You need to pad with zeros when the random value is less than 0×100000, so here's the correct version:
var randomColor = "#000000".replace(/0/g,function(){return (~~(Math.random()*16)).toString(16);});
That replaces each of six 0s with a random hex digit, so it's sure to end up with a full six-digit valid color value.
Solution 49 - Javascript
var html = '';
var red;
var green;
var blue;
var rgbColor;
for ( var i = 1; i <= 100; i += 1) {
red = Math.floor(Math.random() * 256 );
green = Math.floor(Math.random() * 256 );
blue = Math.floor(Math.random() * 256 );
rgbColor = 'rgb(' + red + ',' + green + ',' + blue + ')';
html += '<div style="background-color:' + rgbColor + '"></div>';
}
document.write(html);
Solution 50 - Javascript
This line should randomly change the color for you:
setInterval(function(){y.style.color=''+"rgb(1"+Math.floor(Math.random() * 100)+",1"+Math.floor(Math.random() * 100)+",1"+Math.floor(Math.random() * 100)+")"+'';},1000);
Solution 51 - Javascript
I have generated 100 different colors of different contrast, and you can increase values according to your need:
Example on Feedle: <http://jsfiddle.net/zFbfE/29/> -
// CHANGE THE INITIAL SEED HERE
Math.seed = 23;
/**
* Math.seededRandom()
*
*/
Math.seededRandom = function(max, min) {
max = max || 1;
min = min || 0;
Math.seed = (Math.seed * 9301 + 49297) % 233280;
var rnd = Math.seed / 233280.0;
return min + rnd * (max - min);
}
var c, r = 0,
l = 100000,
t,
random = [],
seededRandom = [];
for(var i=0; i<100; i++)
{
random[i] = 0;
seededRandom[i] = 0;
}
// Do some loops withouth benchmarking
// to have a "fair" comparison
/*for (c = 0; c < l; ++c) {
r = 5+5;
}*/
// benchmark Math.random()
t = new Date().getTime();
s = '';
// benchmark Math.seededRandom()
t = new Date().getTime();
while(l--){
r = Math.seededRandom();
seededRandom[(r*100)|0] += 1;
}
var inc = 0;
for(c=0; c<seededRandom.length; c++) {
//var inc=15;
for(var i=0; i<seededRandom.length; i++)
{
if(i!==c) {
if(seededRandom[c] == seededRandom[i]) {
seededRandom[c] += inc;
inc = inc + 10;
// console.log(seededRandom[c]);
}
}
}
inc = inc > 255 ? 0 : inc;
}
var a=[], b=[], d=[], inc=0, dec=255;
for(c=0; c<seededRandom.length; c++) {
a[c] = (seededRandom[c] % 100) + inc;
b[c] = dec - Math.floor(seededRandom[c]/100);
if(b[c] < 0)
b[c] = b[c]* - 1;
if(a[c] > 255)
a[c] -= 255;
d[c] = Math.floor(b[c]/2);
inc += 5;
dec -= 5;
}
var app = angular.module("myAppp", []).controller('myCtrl',function($scope, $http) {
$scope.id = [];
for(var i=0; i<seededRandom.length; i++)
$scope.id.push(i);
// Generate random number
$scope.Icon = [];$scope.Icon2 = [], $scope.Icon3 = [];
var ran = 0, inc = 5, dec = 255;
for(var i=0;i<seededRandom.length;i++)
{
$scope.Icon.push(a[i]%100);
$scope.Icon2.push(b[i]%100);
$scope.Icon3.push(d[i]%100);
console.log(a[i] + "|" + b[i] + "|" + d[i]);
}
});
It works for me and I think it would be helpful for you also.
One best thing in this example is, it will generate 100 random colors and colors would be same on every page load.
Solution 52 - Javascript
function randomColor(format = 'hex') {
const rnd = Math.random().toString(16).slice(-6);
if (format === 'hex') {
return '#' + rnd;
}
if (format === 'rgb') {
const [r, g, b] = rnd.match(/.{2}/g).map(c=>parseInt(c, 16));
return `rgb(${r}, ${g}, ${b})`;
}
}
Solution 53 - Javascript
Try out this package - https://www.npmjs.com/package/gen-random-colors.
It also provides the ability to configure the color set from 0 to 5 (0 is the darkest).
Solution 54 - Javascript
I like parseInt for this case:
parseInt(Math.random()*0xFFFFFFFF).toString(16)
Solution 55 - Javascript
function getHashColor() {
var hash = "0123456789ABCDEF";
var hashColor = "#";
for (var i = 0; i < 6; i++)
hashColor += hash[Math.floor(Math.random() * hash.length)];
document.getElementById('demo').style.background = hashColor
}
<div id="demo" style="background:red;height:300px;width:300px"></div>
<button type="button" onclick="getHashColor()">Clik Me</button>
Solution 56 - Javascript
A working single-line solution (with padding leading zeroes):
var color = "#" + "colors".split("").map(function(){return parseInt(Math.random()*0x10).toString(16);}).join("");
Solution 57 - Javascript
With recursion:
var randomColor = (s='') => s.length === 6 ? '#' + s : randomColor(s + '0123456789ABCDEF'[Math.floor(Math.random() * 16)]);
randomColor();
Solution 58 - Javascript
Use:
function randomColor(){
var num = Math.round(Math.random() * Math.pow(10,7));
// Converting number to hex string to be read as RGB
var hexString = '#' + num.toString(16);
return hexString;
}
Solution 59 - Javascript
Review
A lot of the answers here are based on Math.random().toString(16). They sometimes multiply a random number by some number and assume that a conversion to a hexadecimal string will always produce a floating point hexadecimal representation which has at least six digits after the dot (and they use those digits as the color).
This is a wrong assumption
Because there is a lot of numbers which actually give less than six digits (after the dot). If Math.random() choose such a number, then the resulting hexadecimal color will be invalid (unless someone handles this case). Here is an example generator (which I write based on this converter) for such values.
function calc() {
let n = hex2dec(hexInput.value)
console.log(`${n} -> ${n.toString(16)}` );
}
// Source: https://stackoverflow.com/questions/5055723/converting-hexadecimal-to-float-in-javascript/5055821#5055821
function hex2dec(hex) {
hex = hex.split(/\./);
var len = hex[1].length;
hex[1] = parseInt(hex[1], 16);
hex[1] *= Math.pow(16, -len);
return parseInt(hex[0], 16) + hex[1];
}
Put some 5-digit (or less) hexdecimal number in range 0-1<br>
<input id="hexInput" value="0.2D4EE">
<button onclick="calc()">Calc</button>
I already gave two answers to your question without this assumption: RGB and hexadecimal so in this answer I will not put in another solution.
Solution 60 - Javascript
I WANT MATERIAL-COLORS UI. So with this answer stackoverflow answer
and with this github repo defaultPalette i made this javascript where you can just import to and you can call it just by const color= defaultPalette(); or const color = defaultPalette('flatui');
<!-- language: lang-js -->
const defaultPalette = {
// Red, Pink, Purple, Deep Purple, Indigo, Blue, Light Blue, Cyan, Teal, Green, Light Green, Lime, Yellow, Amber, Orange, Deep Orange, Brown, Grey, Blue Grey
'50': ['#FFEBEE', '#FCE4EC', '#F3E5F5', '#EDE7F6', '#E8EAF6', '#E3F2FD', '#E1F5FE', '#E0F7FA', '#E0F2F1', '#E8F5E9', '#F1F8E9', '#F9FBE7', '#FFFDE7', '#FFF8E1', '#FFF3E0', '#FBE9E7', '#EFEBE9', '#FAFAFA', '#ECEFF1'],
'100': ['#FFCDD2', '#F8BBD0', '#E1BEE7', '#D1C4E9', '#C5CAE9', '#BBDEFB', '#B3E5FC', '#B2EBF2', '#B2DFDB', '#C8E6C9', '#DCEDC8', '#F0F4C3', '#FFF9C4', '#FFECB3', '#FFE0B2', '#FFCCBC', '#D7CCC8', '#F5F5F5', '#CFD8DC'],
'200': ['#EF9A9A', '#F48FB1', '#CE93D8', '#B39DDB', '#9FA8DA', '#90CAF9', '#81D4FA', '#80DEEA', '#80CBC4', '#A5D6A7', '#C5E1A5', '#E6EE9C', '#FFF59D', '#FFE082', '#FFCC80', '#FFAB91', '#BCAAA4', '#EEEEEE', '#B0BEC5'],
'300': ['#E57373', '#F06292', '#BA68C8', '#9575CD', '#7986CB', '#64B5F6', '#4FC3F7', '#4DD0E1', '#4DB6AC', '#81C784', '#AED581', '#DCE775', '#FFF176', '#FFD54F', '#FFB74D', '#FF8A65', '#A1887F', '#E0E0E0', '#90A4AE'],
'400': ['#EF5350', '#EC407A', '#AB47BC', '#7E57C2', '#5C6BC0', '#42A5F5', '#29B6F6', '#26C6DA', '#26A69A', '#66BB6A', '#9CCC65', '#D4E157', '#FFEE58', '#FFCA28', '#FFA726', '#FF7043', '#8D6E63', '#BDBDBD', '#78909C'],
'500': ['#F44336', '#E91E63', '#9C27B0', '#673AB7', '#3F51B5', '#2196F3', '#03A9F4', '#00BCD4', '#009688', '#4CAF50', '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800', '#FF5722', '#795548', '#9E9E9E', '#607D8B'],
'600': ['#E53935', '#D81B60', '#8E24AA', '#5E35B1', '#3949AB', '#1E88E5', '#039BE5', '#00ACC1', '#00897B', '#43A047', '#7CB342', '#C0CA33', '#FDD835', '#FFB300', '#FB8C00', '#F4511E', '#6D4C41', '#757575', '#546E7A'],
'700': ['#D32F2F', '#C2185B', '#7B1FA2', '#512DA8', '#303F9F', '#1976D2', '#0288D1', '#0097A7', '#00796B', '#388E3C', '#689F38', '#AFB42B', '#FBC02D', '#FFA000', '#F57C00', '#E64A19', '#5D4037', '#616161', '#455A64'],
'800': ['#C62828', '#AD1457', '#6A1B9A', '#4527A0', '#283593', '#1565C0', '#0277BD', '#00838F', '#00695C', '#2E7D32', '#558B2F', '#9E9D24', '#F9A825', '#FF8F00', '#EF6C00', '#D84315', '#4E342E', '#424242', '#37474F'],
'900': ['#B71C1C', '#880E4F', '#4A148C', '#311B92', '#1A237E', '#0D47A1', '#01579B', '#006064', '#004D40', '#1B5E20', '#33691E', '#827717', '#F57F17', '#FF6F00', '#E65100', '#BF360C', '#3E2723', '#212121', '#263238'],
'A100': ['#FF8A80', '#FF80AB', '#EA80FC', '#B388FF', '#8C9EFF', '#82B1FF', '#80D8FF', '#84FFFF', '#A7FFEB', '#B9F6CA', '#CCFF90', '#F4FF81', '#FFFF8D', '#FFE57F', '#FFD180', '#FF9E80'],
'A200': ['#FF5252', '#FF4081', '#E040FB', '#7C4DFF', '#536DFE', '#448AFF', '#40C4FF', '#18FFFF', '#64FFDA', '#69F0AE', '#B2FF59', '#EEFF41', '#FFFF00', '#FFD740', '#FFAB40', '#FF6E40'],
'A400': ['#FF1744', '#F50057', '#D500F9', '#651FFF', '#3D5AFE', '#2979FF', '#00B0FF', '#00E5FF', '#1DE9B6', '#00E676', '#76FF03', '#C6FF00', '#FFEA00', '#FFC400', '#FF9100', '#FF3D00'],
'A700': ['#D50000', '#C51162', '#AA00FF', '#6200EA', '#304FFE', '#2962FF', '#0091EA', '#00B8D4', '#00BFA5', '#00C853', '#64DD17', '#AEEA00', '#FFD600', '#FFAB00', '#FF6D00', '#DD2C00'],
'flatui': ['#1ABC9C', '#2ECC71', '#3498DB', '#9B59B6', '#34495E', '#16A085', '#27AE60', '#2980B9', '#8E44AD', '#2C3E50', '#F1C40F', '#E67E22', '#E74C3C', '#ECF0F1', '#95A5A6', '#F39C12', '#D35400', '#C0392B', '#BDC3C7', '#7F8C8D'],
'metro': ['#A4C400', '#60A917', '#008A00', '#00ABA9', '#1BA1E2', '#0050EF', '#6A00FF', '#AA00FF', '#F472D0', '#D80073', '#A20025', '#E51400', '#FA6800', '#F0A30A', '#E3C800', '#825A2C', '#6D8764', '#647687', '#76608A', '#A0522D']
}
const defaultBase = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', 'A100', 'A200', 'A400', 'A700', 'flatui', 'metro']
const randomIntFromInterval = (min, max) => { // min and max included
return Math.floor(Math.random() * (max - min + 1) + min)
}
export default (choosePalette)=>{
if (choosePalette === undefined) {
const nrindexdefault = defaultBase.length - 1;
const number = randomIntFromInterval(0, nrindexdefault);
const defaultPaletteColorsArray = defaultPalette[defaultBase[number]];
const nrindexcolor = defaultPaletteColorsArray.length - 1;
const defaultColor = randomIntFromInterval(0, nrindexcolor)
return defaultPaletteColorsArray[defaultColor];
} else {
const defaultPaletteColorsArray = defaultPalette[choosePalette];
const nrindexcolor = defaultPaletteColorsArray.length - 1;
const defaultColor = randomIntFromInterval(0, nrindexcolor)
return defaultPaletteColorsArray[defaultColor];
}
}
Solution 61 - Javascript
function generateRandomColor()
{
var randomColor = '#'+Math.floor(Math.random()*16777215).toString(16);
return randomColor;
//random color will be freshly served
}
document.body.style.backgroundColor = generateRandomColor() // -> #e1ac94
someDiv.style.color = generateRandomColor() // -> #34c7aa
Solution 62 - Javascript
Random rgb color in JS
const getRandomArbitrary = (min, max) => parseInt(Math.random() * (max - min) + min, 10)
const generateRandomRGBColor = () =>
`rgb(${getRandomArbitrary(0, 255)}, ${getRandomArbitrary(0, 255)}, ${getRandomArbitrary(0, 255)})`;
// generateRandomRGBColor()
Or you can use online tool to generate colors palette - I have built https://colorswall.com/palette/generate for this purpose.
Solution 63 - Javascript
Using HexaDecimal for a random color generation:(#000000 - #FFFFFF)
The syntax is pretty straightforward. We specify a hexadecimal color as #RRGGBB. We know that each hexadecimal color (RR, GG, and BB) is defined by 8 bytes. Remember, each byte can represent 256 values.
- RR - 16 * 16 (0,1,2,3... F)=256. Similary for GG and BB.
This means that the hexadecimal color system can take on 256(R) x 256(G) x 256(B) = 16,777,216 values.
We use Math.random() and Math.floor() to get a number that results in the range 0 and 16777215.
Math.floor(Math.random()*16777215)
Finally, the Number needs to be converted into base 16(hexadecimal), We can get this by using toString(base).
Math.floor(Math.random()*16777215).toString(16);
//->12ef556
let randomColor = '#'+Math.floor(Math.random()*16777215).toString(16);