Randomize colors in a script

Question

I have this script that generates a random order for a group of numbers when the page is refreshed, and I would like to randomize the colors of the numbers (each number a different color) as well. It also could be that each number has a fixed color, and they just appear random by virtue of the numbers getting randomized. I can't figure out how to do that either. Any help is greatly appreciated.

var contents=new Array()
contents[0]='0'
contents[1]='1'
contents[2]='2'
contents[3]='3'
contents[4]='4'
contents[5]='5'
contents[6]='6'
contents[7]='7'
contents[8]='8'
contents[9]='9'
contents[10]='10'
contents[11]='11'
contents[12]='12'
contents[13]='13'
contents[14]='14'
contents[15]='15'
contents[16]='16'
contents[17]='17'
contents[18]='18'
contents[19]='19'
contents[20]='20'

var spacing="<br />"

var the_one
var z=0

while (z<contents.length){
the_one=Math.floor(Math.random()*contents.length)
if (contents[the_one]!="_selected!"){
document.write(contents[the_one]+spacing)
contents[the_one]="_selected!"
z++
}
}

A similar question was asked, you can check out https://stackoverflow.com/questions/1484506/random-color-generator — Pradeep Dayaram, Jul 12 '20 at 20:05

Pavlos Karalis · Accepted Answer · 2020-07-13T02:17:11.570

0

Adjust with the following:

 const c = [1,2,3].map(ele => Math.floor(Math.random() * 216)); 
 document.write(`<span style="color: rgb(${c.join(",")});">${contents[the_one]+spacing}<span>`);

See example:

var contents = new Array()
contents[0] = '0'
contents[1] = '1'
contents[2] = '2'
contents[3] = '3'
contents[4] = '4'
contents[5] = '5'
contents[6] = '6'
contents[7] = '7'
contents[8] = '8'
contents[9] = '9'
contents[10] = '10'
contents[11] = '11'
contents[12] = '12'
contents[13] = '13'
contents[14] = '14'
contents[15] = '15'
contents[16] = '16'
contents[17] = '17'
contents[18] = '18'
contents[19] = '19'
contents[20] = '20'

var spacing = "<br />"

var the_one
var z = 0

while (z < contents.length) {
  the_one = Math.floor(Math.random() * contents.length)
  if (contents[the_one] != "_selected!") {
    const c = [1,2,3].map(ele => Math.floor(Math.random() * 216)); 
    document.write(`<span style="color: rgb(${c.join(",")});">${contents[the_one]+spacing}<span>`);
    contents[the_one] = "_selected!"
    z++
  }
}

edited Jul 13 '20 at 02:17

answered Jul 12 '20 at 21:09

Pavlos Karalis

2,893
1
6
14

This works well. Alternatively it would be ideal if there was a list of limited colors to draw from (I'm getting white and almost white colors that are hard to read against the background, but this works well. Thank you – Jul 13 '20 at 02:13
You can create an array of acceptable colors and use Math.floor(Math.random() * arrayName.length) to select a random index. Then plug the value into the style attribute in the same manner. – Pavlos Karalis Jul 13 '20 at 02:16
I also changed 256 to 216 to darken the color selection (it can be further lowered if needed). – Pavlos Karalis Jul 13 '20 at 02:18

Samuli Hakoniemi · Answer 2 · 2020-07-12T21:46:25.860

Edit: re-read the question and it had different needs. But I'll leave this answer here since it explains on how to get randomized colors (the actual topic) in JavaScript.

Here are the functions you'll need to create random hex color values:

const getRandomHex = () => Math.floor(Math.random() * 256).toString(16).padStart(2, '0');

const getRandomRGB = ({R = getRandomHex(), G = getRandomHex(), B = getRandomHex(), A } = {}) => ['#', R, G, B, A].join('');

console.log(getRandomRGB());
console.log(getRandomRGB({ A: '00' }));

The first function getRandomHex will convert random (0-255) numeric value as Base16 aka hexadecimal string. And if necessary, adds an additional zero in front.

The main function getRandomRGB will append three (red, green, blue) values to an array and then join the array as single string.

In addition, you can override R/G/B (and alpha channel) values as passed properties.

The reason I selected this approach is simply that it allows manipulating the generated R/G/B values if needed (like in use case: "keep the 'red value' static - while green and blue values are randomised").

Randomize colors in a script

2 Answers2