# Diversion: Generating a random color from JavaScript Raymond

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.
return (v.length == 1) ? '0' + v : v;
}
function randomColor() {
return "#" + 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 "#" +
}
```

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

```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);
}
``` 