## DEV Community is a community of 751,566 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Enyichi A. Agu

Posted on

# How to Generate random hex color values in javascript

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

## Discussion (3)

SavagePixie

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.

``````let hex = digit().toString(16)

//check if length is 2, if not pad with 0
hex = hex.length < 2 ? hex.padStart(2, 0) : hex;
``````

The above code could be rewritten as:

``````let hex = digit().toString(16)
``````

Or even:

``````const hex = digit()
.toString(16)
```function generateRandomHexColor() { return `#\${Math.random().toString(16).substring(2, 8)}`; }```