JavaScript Random Color
Javascript random color generator functions. Generate random hex color, random RGB color, random HSL color
0 Comments
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(', ')+')';
}
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+'%)';
}
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>
0 comments
