JavaScript Random Colors Generating Functions
Codes that generate random colors and similar colors using JavaScript. Generating random hex color, random RGB color, random HSL color
Random Hex Color
Random Hue Color
Random Hue Light And Dark Color
Similar Color Light and Dark Random
Random RGB Color
Random HSL Color
Demo :
Random Colors
Usage
<button id="random-hex">Random Hex Color</button>
<h2 id="preview-color"></h2>
<script>
document.getElementById("random-hex").onclick = function(){
let preview_color = document.getElementById("preview-color");
let hex_color = get_random_hex_color();
preview_color.innerHTML= hex_color;
preview_color.style.color = 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
<button id="random-hue">Random Hue Hex Color</button>
<h1 id="preview-color"></h1>
<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
<button id="random-ld-hex">Random Hue Light Dark Hex Color</button>
<h1 id="preview-color"></h1>
<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
<input type="text" id="hex-color" value="#ff0000">
<h1 id="preview-color"></h1>
<button id="random-similar">Random</button>
<script>
document.getElementById("random-similar").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>
Usage
<button id="random-rgb">Random</button>
<h1 id="preview-color"></h1>
<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>
Usage
<button id="random-hsl">Random</button>
<h1 id="preview-color"></h1>
<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>
