Back

Random Colors

JavaScript random colors generating

Random Hex Color
<div id="random_hex_preview"></div>
<button onclick="create_random_hex()">Random Color</button>

<script>
function create_random_hex() {
	let a = document.getElementById('random_hex_preview');
	let b = '';
	a.innerHTML = '';
	for (let i = 0; i < 100; i++) {
		let color = random_hex_color();
		b += '<div style="background-color:'+color+';width:20px;height:20px;display: inline-block;margin: 1px;"></div>';
	}
	a.innerHTML = b;
}
</script>
Random Hue Color
<div id="random_hue_preview"></div>
<button onclick="create_random_hue()">Random Color</button>

<script>
function create_random_hue() {
	let a = document.getElementById('random_hue_preview');
	let b = '';
	a.innerHTML = '';
	for (let i = 0; i < 100; i++) {
		let color = get_random_hue_color();
		b += '<div style="background-color:'+color+';width:20px;height:20px;display: inline-block;margin: 1px;"></div>';
	}
	a.innerHTML = b;
}
</script>
Random Hue Light Dark Color
saturation
lightness
create_random_hue_light_dark(100, 50)
<div id="random_hue_dark_light_preview"></div>
<button onclick="create_random_hue_light_dark()">Random Color</button>

<script>
function create_random_hue_light_dark() {
	let a = document.getElementById('random_hue_dark_light_preview');
	let b = '';
	a.innerHTML = '';
	var saturation = 100;  // 20 - 100;
	var lightness = 85;    //20 - 85;
	for (let i = 0; i < 100; i++) {
		let color = get_random_hue_light_dark(saturation, lightness);
		b += '<div style="background-color:'+color+';width:20px;height:20px;display: inline-block;margin: 1px;"></div>';
	}
	a.innerHTML = b;
}
</script>
Selected Color random Light Dark
Set color (red, green, yellow...)
<div id="color_light_dark_random_preview"></div>
<button onclick="create_random_light_dark()">Random Color</button>

<script>
function create_random_light_dark() {
	let a = document.getElementById('color_light_dark_random_preview');
	let b = '';
	a.innerHTML = '';
	var hex_color = '#1100FF'; // blur, red, yellow, green hex color
	for (let i = 0; i < 100; i++) {
		let color = get_color_light_dark_random(hex_color);
		b += '<div style="background-color:'+color+';width:20px;height:20px;display: inline-block;margin: 1px;"></div>';
	}
	a.innerHTML = b;
}
</script>