Generating random RGB colors in a javascript web app would be very easy to implement.

We would just have a function with no parameters which would generate a random color from 0 - 255. Something like this:

```
const digit = () => `${Math.round(Math.random() * 255)}`
```

and now to generate our colors, we make another function to return an array of three random digits

```
const array = () => {
let list = [];
for (let i = 0; i < 3; i++) {
list.push(digit());
}
return list;
}
array()
//-> [155, 13, 9]
```

We just pushed three random numbers into the list and returned it. We also made `array`

a function so that it dosen't have a definite value like a variable. whenever we call `array()`

, it runs the whole thing over again and produces a different value every time.

Finally, to get a random rgb color:

```
const color = (r, g, b) => `rgb(${r}, ${g}, ${b})`;
color(...array())
//-> "rgb(142, 112, 11)"
```

Notice we had to 'spread' the array that would be returned from the function `array()`

. These syntax are from ES6+ javascript. To learn more about it, checkout Codeacademy.

For hex colors though, we need to

- Convert the numbers to base 16
- Make sure we add 0 to the begining of a hex digit whoose length is not up to two

Why we are doing this is because, for example

11 in base 16 is B

14 is E

15 is F

An `rgb(11,14,15)`

and `#bef`

are not the same thing. The hex equivalent should be `#0b0e0f`

. We need to pad our digits with 0.

So lets modify the array to push hex digits that have been converted to base 16 and padded. Well use `padStart`

method for strings.

```
const array = () => {
let list = [];
for (let i = 0; i < 3; i++) {
//convert to base 16
let hex = digit().toString(16)
//check if length is 2, if not pad with 0
hex = hex.length < 2 ? hex.padStart(2, 0) : hex;
//push hex
list.push(hex);
}
return list
}
```

We also modify the color function to return a value in hex format

```
const color = (r, g, b) => `#${r}${g}${b}`;
```

finally, if we run `color(...array())`

a random hex appears.

```
color(...array)
//-> #efef22
```

This is my first blog post. Suggestions are highly welcome

## Top comments (3)

Good explanation and good job and making sure to add zeroes!

One small thing, though, pad functions add stuff to a string

until the string reaches the desired length. So the ternary there is unnecessary.The above code could be rewritten as:

Or even:

Thank you very much. Never even thought of that.

`function generateRandomHexColor() {`

return `#${Math.random().toString(16).substring(2, 8)}`;

}

I think you could just do this also