JavaScript Random Color
Javascript random color generator functions. Generate random hex color, random RGB color, random HSL color
Random Hex Color
Random Hue Color
Random Hue Light And Dark Color
Selected Color Between Light and Dark Random
Random RGB Color
Random HSL Color
Demo Random Colors:
Demo function get_random_hex_color() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
Usage
<h1 id="preview-color"></h1>
<button id="random-hex">Random Hex Color</button>
<script>
document.getElementById("random-hex").onclick = function(){
var preview_color = document.getElementById("preview-color");
var hex_color = get_random_hex_color();
preview_color.innerHTML= hex_color;
preview_color.style.backgroundColor = hex_color;
};
</script>
function get_random_hue_color() {
let h = Math.floor(Math.random() * 361);
let s = 100;
let l = 50;
h /= 360;
s /= 100;
l /= 100;
let r, g, b;
if (s === 0) {
r = g = b = l;
} else {
const hue2rgb = function(p, q, t) {
if (t < 0) t += 1;
if (t > 1) t -= 1;
if (t < 1 / 6) return p + (q - p) * 6 * t;
if (t < 1 / 2) return q;
if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
return p;
};
const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
const p = 2 * l - q;
r = hue2rgb(p, q, h + 1 / 3);
g = hue2rgb(p, q, h);
b = hue2rgb(p, q, h - 1 / 3);
}
const toHex = function(x) {
const hex = Math.round(x * 255).toString(16);
return hex.length === 1 ? '0' + hex : hex;
};
return '#'+toHex(r)+toHex(g)+toHex(b);
}
Usage
<h1 id="preview-color"></h1>
<button id="random-hue">Random Hue Hex Color</button>
<script>
document.getElementById("random-hue").onclick = function(){
var preview_color = document.getElementById("preview-color");
var hex_color = get_random_hue_color();
preview_color.innerHTML= hex_color;
preview_color.style.backgroundColor = hex_color;
};
</script>Hue
Saturation
20
100
Lightness
20
85
function get_random_hue_light_dark(saturation, lightness) {
// saturation 20 - 100;
// lightness 20 - 85;
var h = Math.floor(Math.random() * 361);
var s = saturation < 0 ? 0 : saturation > 100 ? 100 : saturation;
var l = lightness < 0 ? 0 : lightness > 100 ? 100 : lightness;
h /= 360;
s /= 100;
l /= 100;
let r, g, b;
if (s === 0) {
r = g = b = l;
} else {
const hue2rgb = function(p, q, t) {
if (t < 0) t += 1;
if (t > 1) t -= 1;
if (t < 1 / 6) return p + (q - p) * 6 * t;
if (t < 1 / 2) return q;
if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
return p;
};
const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
const p = 2 * l - q;
r = hue2rgb(p, q, h + 1 / 3);
g = hue2rgb(p, q, h);
b = hue2rgb(p, q, h - 1 / 3);
}
const toHex = function(x) {
const hex = Math.round(x * 255).toString(16);
return hex.length === 1 ? '0' + hex : hex;
};
return '#'+toHex(r)+toHex(g)+toHex(b);
}
Usage
<h1 id="preview-color"></h1>
<button id="random-ld-hex">Random Hue Light Dark Hex Color</button>
<script>
document.getElementById("random-ld-hex").onclick = function(){
var preview_color = document.getElementById("preview-color");
var saturation = 70; // 20 - 100;
var lightness = 40; // 20 - 85;
var hex_color = get_random_hue_light_dark(saturation, lightness);
preview_color.innerHTML= hex_color;
preview_color.style.backgroundColor = hex_color;
};
</script>function get_color_light_dark_random(hex_color) {
hex_color = hex_color.replace(/#/g, '');
if (hex_color.length === 3) {
hex_color = hex_color.split('').map(function (hex) {
return hex + hex;
}).join('');
}
var result = /^([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})[\da-z]{0,0}$/i.exec(hex_color);
if (!result) {
return null;
}
var r = parseInt(result[1], 16);
var g = parseInt(result[2], 16);
var b = parseInt(result[3], 16);
r /= 255, g /= 255, b /= 255;
var max = Math.max(r, g, b),
min = Math.min(r, g, b);
var h = (max + min) / 2;
if (max == min) {
h = 0;
} else {
var d = max - min;
switch (max) {
case r:
h = (g - b) / d + (g < b ? 6 : 0);
break;
case g:
h = (b - r) / d + 2;
break;
case b:
h = (r - g) / d + 4;
break;
}
h /= 6;
}
h = Math.round(360 * h);
var s = Math.floor(Math.random() * (100 - 20)) + 20;
var l = Math.floor(Math.random() * (80 - 20)) + 20;
h /= 360;
s /= 100;
l /= 100;
var r, g, b;
if (s === 0) {
r = g = b = l;
} else {
const hue2rgb = function (p, q, t) {
if (t < 0) t += 1;
if (t > 1) t -= 1;
if (t < 1 / 6) return p + (q - p) * 6 * t;
if (t < 1 / 2) return q;
if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
return p;
};
const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
const p = 2 * l - q;
r = hue2rgb(p, q, h + 1 / 3);
g = hue2rgb(p, q, h);
b = hue2rgb(p, q, h - 1 / 3);
}
const toHex = function (x) {
const hex = Math.round(x * 255).toString(16);
return hex.length === 1 ? '0' + hex : hex;
};
return '#' + toHex(r) + toHex(g) + toHex(b);
}
Usage
<h1 id="preview-color"></h1>
<input type="text" id="hex-color" value="#ff0000">
<button id="random-ld-hex">Random</button>
<script>
document.getElementById("random-ld-hex").onclick = function(){
var preview_color = document.getElementById("preview-color");
let hex_color = document.getElementById("hex-color").value;
var dark_light = get_color_light_dark_random(hex_color);
preview_color.innerHTML= dark_light;
preview_color.style.backgroundColor = dark_light;
};
</script>function get_random_rgb() {
var rgb = [Math.floor(Math.random() * 256),Math.floor(Math.random() * 256),Math.floor(Math.random() * 256)];
return 'rgb('+rgb.join(', ')+')'; // rgb(171, 236, 219)
// return 'rgb('+rgb.join(' ')+')'; // rgb(171 236 219)
}
Usage
<h1 id="preview-color"></h1>
<button id="random-rgb">Random</button>
<script>
document.getElementById("random-rgb").onclick = function(){
var preview_color = document.getElementById("preview-color");
var rgb = get_random_rgb();
preview_color.innerHTML= rgb;
preview_color.style.backgroundColor = rgb;
};
</script>function get_random_hsl() {
var h = Math.floor(Math.random() * 361);
var s = Math.floor(Math.random() * 101);
var l = Math.floor(Math.random() * 101);
return 'hsl('+h+', '+s+'%, '+l+'%)'; // hsl(263, 11%, 90%)
// return 'hsl('+h+'deg '+s+'% '+l+'%)'; // hsl(263deg 11% 90%)
}
Usage
<h1 id="preview-color"></h1>
<button id="random-hsl">Random</button>
<script>
document.getElementById("random-hsl").onclick = function(){
var preview_color = document.getElementById("preview-color");
var hsl = get_random_hsl();
preview_color.innerHTML= hsl;
preview_color.style.backgroundColor = hsl;
};
</script>