How To Generate A Random Color Or An Array Using Pure JavaScript?

Did you ever feel bored or tired of writing long random colors for different divs or spans just to test something simple?

When learning about the power of JavaScript and its dynamic influence over an HTML page, one of the first things to jump out as a nascent web developer is the ability to add listeners to elements on the page that react to user input.

When it comes to colors, most of the time your choice on what color to use will be deliberate. You may have a style guide you have to follow. Your design team may have provided feedback on a particular color that makes the most sense. Maybe, you just like this shade of green and, against the wishes all your more artistically talented friends, want to use it in a lot of places:

Many developers use random color generation to provide an awesome looking UI to their websites. For generating random color codes using JavaScript you need to learn the basics of color theory and maths. In this post, I will be explaining the color theory, basic math functions, and random color generating methods.

There are many code snippets available online or on many other blogs and website but everyone is not able to optimize your blog or website so you need some optimized code snippet. So now checkout out code snippet for your blog and website that will give you all features for your desired code. Now grab the ready to use code and paste it where you want.

Generate Random HEX Code Color Array Using Pure JavaScript:

/* Get Desired Finite Random Colours In Array
----------------------------------------------- */
function getColorArray(num) {
var result = [];
for (var i = 0; i < num; i += 1) {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var j = 0; j < 6; j += 1) {
color += letters[Math.floor(Math.random() * 16)];
}
result.push(color);
}
return result;
}

Generate Single HEX Code Color Array Using Pure JavaScript:

var randomColor = Math.floor(Math.random()*16777215).toString(16);

Generate Single RGB Code Color Array Using Pure JavaScript:

JavaScript Code snippet to generate a random RGB color. Could be useful for supplying color values to transitions to/from with a single line of code.

var hue = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';

or

function random_bg_color() {
    var x = Math.floor(Math.random() * 256);
    var y = Math.floor(Math.random() * 256);
    var z = Math.floor(Math.random() * 256);
    var bgColor = "rgb(" + x + "," + y + "," + z + ")";
console.log(bgColor); 
document.body.style.background = bgColor;
}
random_bg_color();

Customization:

You can edit your code if you want with tweaks etc. Nothing to customize anything more.

Troubleshooting the Errors

Do it with concentration and patience. Check your alls steps and again and all codes or scripts. If you find any error you can contact us anytime via comment or better via email, We are always here to help you.

Final Words:

That’s all we have. We hope that you liked this article. If you have any problem with this code in your template then feel free to contact us with a full explanation of your problem. We will reply to you as time allows us or If you have any doubts and problem please comment below. We are happy to help you! If you liked this article, Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy development, See you in the next article.