I am trying to generate random color codes using JavaScript

Question

I am trying to generate random color codes or one base colour-based codes. I am not much familiar with JavaScript & coloring

What I have gathered so far:

function getColors(len) {
  var colors = [];

  for (var i = 0; i < len; i++) {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    colors.push(color);
  }

  return colors;
}

Thanks

Answer 1

If i understood you correctly. Try below function. It returns you the collection of colors if you pass anything and random. But if you pass baseColor it will generate hue set of colors based on basedColor. hue defined base colors are : red,yellow,green,cyan,blue & magenta.

Usage

example: 1 - getRandomColors(10) or getRandomColors(10,'random') or getRandomColors(10,'anything besides Hue')

result : //(10) ["#C4AD05", "#B63DCB", "#22A9FE", "#59DCAC", "#986FFD", "#493E56", "#49693D", "#83029A", "#59E3C0", "#C6FB84"]

example: 2 - getRandomColors(10,'blue') //baseColor

result: //(10) ["hsl(240, 79%, 19%)", "hsl(240, 44%, 45%)", "hsl(240, 13%, 64%)", "hsl(240, 63%, 73%)", "hsl(240, 52%, 45%)", "hsl(240, 61%, 83%)", "hsl(240, 46%, 58%)", "hsl(240, 35%, 6%)", "hsl(240, 89%, 89%)", "hsl(240, 76%, 97%)"]

Code

function getRandomColors(len, baseColor = 'random') {
        var colors = [];
        var baseValue = getColorValue(baseColor);
        var execFn = getExecFn(baseValue);

        for (var i = 0; i < len; i++) {
            colors.push(execFn());
        }

        return colors;

        function getExecFn(baseColorValue) {
            if (baseColorValue == -1) {
                return getRandomColor;
            }
            else {
                return hueSet;
            }
        }

        function hueSet() {
            h = baseValue;
            s = Math.floor(Math.random() * 100);
            l = Math.floor(Math.random() * 100);
            return 'hsl(' + h + ', ' + s + '%, ' + l + '%)';
        }

        function getRandomColor() {
            var letters = '0123456789ABCDEF';
            var color = '#';
            for (var i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }

        function getColorValue(baseColor) {
            switch (baseColor.toLowerCase()) {
                case 'red':
                    return 0;
                case 'yellow':
                    return 60;
                case 'green':
                    return 120;
                case 'cyan':
                    return 180;
                case 'blue':
                    return 240;
                case 'magenta':
                    return 300;
                default:
                    return -1;
            }
        }
    }

Answer 2

For my part, I prossessed as follows:

var RGBColor1 = Math.floor(Math.random() * Math.floor(255));
var RGBColor2 = Math.floor(Math.random() * Math.floor(255));
var RGBColor3 = Math.floor(Math.random() * Math.floor(255));
colors.push(RGBColor1);
colors.push(RGBColor2)
colors.push(RGBColor3)

You can do a loop to go faster