A colleague posed a little puzzle for a fun little app he was writing in HTML: He wanted to generate a random color.

If you search around the intertubes, you can find several possible attempts at a solution, like this collection, and an interesting example that has trouble with the pigeonhole principle.

The original function to generate a random color went like this:

// Pad a string of up to two characters with a leading zero
// so the result is always exactly two characters long.
function padZero(v) {
 return (v.length == 1) ? '0' + v : v;
}
function randomColor() {
 return "#" + padZero(Math.floor(Math.random() * 256)).toString(16) +
              padZero(Math.floor(Math.random() * 256)).toString(16) +
              padZero(Math.floor(Math.random() * 256)).toString(16);
}

Can you do better? (My solution after the jump.)

That was a short jump.

My first simplification was recognizing that three random 8-bit values is the same as one random 24-bit value.

function padZeros6(v) {
 while (v.length < 6) v = "0" + v;
 return v;
}
function randomColor() {
 return "#" +
    padZeros6(Math.floor(Math.random() * 16777216).toString(16));
}

Next, I got rid of the padZeros6 function by simply setting bit 25 to force a 7-digit result, then removing the leading 1.

function randomColor() {
 return "#" +
    (Math.floor(Math.random() * 16777216) +
                                16777216).toString(16).substr(1);
}

Finally, I did some factoring.

function randomColor() {
 return "#" +
    Math.floor((1 + Math.random()) * 16777216).toString(16).substr(1);
}

That last bit was a bit dodgy due to the wonders of floating point arithmetic, but hey, it’s a puzzle now.

Finally, I realized that CSS supports #rgb as shorthand for #rrggbb, so if you don’t mind that your color palette is reduced to 4096 colors (and in the case of my colleague’s little app, that was not an issue), you can shorten it a bit more:

function randomColor() {
 return "#" +
    Math.floor((1 + Math.random()) * 4096).toString(16).substr(1);
}