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
Advertisement
Answer
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; } } }