Randomize color by number in javascript

Question

I want to randomize a color by a given id (that it can be any number start from 0) in javascript. For example:

//number is the id I want to give the function
    function getRandomColor(number) {
    var letters = '0123456789ABCDEF';
    var color = '#';
    var generatedNumber = Math.floor(Math.random() * 16);
    var otherNumber = //something to unite generatedNumber and number(the given id) in a valid number
        for (var i = 0; i < 6; i++ ) {
            color += letters[otherNumber];
        }
        return color;
    }

How could I do it?

I don't understand what you mean by "by a given id", is the colour to be completely random and if not, what is the parameter you're giving influencing the result? And can you clarify what exactly is not working in the code you are showing? — Pekka
– Pekka, Commented Jan 27, 2017 at 11:42
The parameter is a number. The color must be randomize using the parameter. — tina
– tina, Commented Jan 27, 2017 at 11:47
But using it in what way? To what end? Can you clarify what your goal is with this => how is the number expected to influence the result? — Pekka
– Pekka, Commented Jan 27, 2017 at 11:48
You might find that you have better luck with a semi-random algorithm that works over a different colorspace than RGB. By simply choosing random RGB colors, you will end up with quite a few dark, similar looking colors. If instead you chose random numbers for the H and S parts of an HSL color, you'll end up with a "better" selection of colors. — spender
– spender, Commented Jan 27, 2017 at 11:49
The end is to use the same color for the same element in a graph dinamically draw with svg and the legend (not related to it, but in the same page) — tina
– tina, Commented Jan 27, 2017 at 11:50

Nina Scholz · Accepted Answer · 2017-01-27 12:05:22Z

6

You need to move the random part inside of the for loop.

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

console.log(getRandomColor());

You could omit the string with the numbers and letters and use toString with base 16.

For keeping the same color for the same id, you could use an object for keeping the color.

function getRandomColor() {
    var color = '#',
        i;
    for (i = 0; i < 6; i++) {
        color += Math.floor(Math.random() * 16).toString(16);
    }
    return color;
}

var getColor = function() {
        var colors = {};
        return function (id) {
            return colors[id] = colors[id] || getRandomColor();
        };
    }();


console.log(getColor('foo'));
console.log(getColor('bar'));
console.log(getColor('baz'));
console.log(getColor('foo'));
console.log(getColor('baz'));

edited Jan 27, 2017 at 12:05

answered Jan 27, 2017 at 11:43

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

tina Over a year ago

This is a random generator that NOT consider the given number

Pekka Over a year ago

Well, how exactly is it supposed to consider the number? What do you want to achieve here?

Nina Scholz Over a year ago

what is number doing?

tina Over a year ago

the code you are showing wark perfectly without a number as argument, I want to use the argument number for randomize the color

Rajesh Dixit Over a year ago

Just a pointer, its better to use string.charAt instead of index. More information. Yes, its supported after ES3, so should not pose much threat, but as a convention, using .charAt would imply, operand is a string. When you do variable[key], variable can be Array or string (key being index) or Object(key being property name). So just my reading the line, you cannot make sure what variable holds

|

spender · Accepted Answer · 2017-01-28 03:32:16Z

1

Following from my comment above, it might be better to manipulate the color in the HSL colorspace, so that you get bold colors. The trick is to maintain a constant luminance while randomising the hue and saturation.

For any combination of hue and saturation, 100% luminance will always be white and 0% luminance will always be black. The strongest impression of color will be seen with a luminance value right in the middle i.e. 50%.

You could do this as follows:

var h = Math.floor(Math.random() * 360); //hue is measured in degrees from 0-359
var s = Math.floor(Math.random() * 256); //saturation is a value from 0-255


$("#theElement").css("background-color","hsla(" + h + ", " + s + "%, 50%, 1)");

#theElement{
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=theElement></div>

So, say you want to generate a palette of 16 colors:

var colors = [];
for(var i = 0; i < 16; ++i)
{
    var h = Math.floor(Math.random() * 360); //hue is measured in degrees from 0-359
    var s = Math.floor(Math.random() * 256); //saturation is a value from 0-255
    colors.push("hsla(" + h + ", " + s + "%, 50%, 1)");
}
var paletteIndex = 3; //for example
$("#theElement").css("background-color", colors[paletteIndex]);

edited Jan 28, 2017 at 3:32

answered Jan 27, 2017 at 12:02

spender

121k36 gold badges245 silver badges369 bronze badges

2 Comments

tina Over a year ago

Your solution was better for randomize colors, but I need to use a given id in my function, in order to have the same color for the same element in my page (see my comments under my question)

spender Over a year ago

@tina So make an array of colors up front so that they can be reused. I added some info to demonstrate this.

Hugo · Accepted Answer · 2017-01-27 12:34:57Z

0

var possibilities = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'];
var newColor = '';
var x = 1;
var z = ''
do { 
z = Math.floor((Math.random() * 16) + 1);
    if (possibilities[z] !== undefined){
      newColor = newColor + possibilities[z]; 
      x++;
    }
}
while (x<7);
console.log("#"+newColor)

answered Jan 27, 2017 at 12:34

Hugo

613 bronze badges

Collectives™ on Stack Overflow

Randomize color by number in javascript

3 Answers 3

10 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

10 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related