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

Contents

  1. Random Hex Color
  2. Random Hue Color
  3. Random Hue Light And Dark Color
  4. Similar Color Light and Dark Random
  5. Random RGB Color
  6. Random HSL Color
1

Random Hex Color

JavaScript
const randomHEXColor = () => {
  let letters = '0123456789ABCDEF';
  let color = '#';
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
};
// short code random HEX color
// const randomHEXColor = () => '#'+Math.floor(Math.random()*16777215).toString(16);
Usage
HTML
<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 = randomHEXColor();
  preview_color.innerHTML= hex_color;
  preview_color.style.color = hex_color;
};
</script>
Demo Hex colors Edit Code
2

Random Hue Color (only light color)

JavaScript
const 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 = (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 = x => {
        const hex = Math.round(x * 255).toString(16);
        return hex.length === 1 ? '0' + hex : hex;
    };
    return '#' + toHex(r) + toHex(g) + toHex(b);
};
Usage
HTML
<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>
Demo Hex colors Edit Code
3

Random Hue Color Light And Dark

Hue
Saturation
20 100
Lightness
20 85
JavaScript
const 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
HTML
<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>
Demo Hex colors Edit Code
4

Similar Color Hex Light and Dark

JavaScript
const 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('');
    }
    let 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
HTML
<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>
Demo Hex colors Edit Code
5

Random RGB Color

JavaScript
const get_random_rgb = () => {
    let 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
HTML
<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>
Edit Code
6

Random HSL Color

JavaScript
const get_random_hsl = () => {
    let h = Math.floor(Math.random() * 361);
    let s = Math.floor(Math.random() * 101);
    let 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
HTML
<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>
Edit Code
Report Problem