JavaScript Random Color

Javascript random color generator functions. Generate random hex color, random RGB color, random HSL color

0 Comments
Demo Random Colors:
Demo
1

Random Hex Color

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

Random Hue Color

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

Random Hue Light Dark Color

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

Selected Color Light Dark Random

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

Random RGB Color

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

Random HSL Color

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
Leave a Reply
hostinger