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
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>