How to Code a Random Color Generator in JavaScript

How to Code a Random Color Generator in JavaScript

Colors are a crucial part of design both online and offline. Almost all elements on a webpage have some color applied to them. There are entire websites built around creating gradients and color pallets either randomly or from a source color.

In this tutorial, we will show you how to generate a random color in JavaScript. Maybe you will find the random color generator useful when developing a website that lets users create stylish posters or form elements!

Understanding the Basic Concept

Colors can be represented in a lot of formats like RGB, Hexadecimal or HSL notation etc. We will generate a random color in these three notations. Generating a random color is simply a matter of generating random numbers.

Luckily, JavaScript does have a Math.random() function that we can use to generate those random numbers. It will give you a random floating-point pseudo-random number that will be greater than or equal to 0 and less than 1. The distribution is pretty much uniform. This is good enough for our use case.

We will be generating random numbers between specific ranges like 0 to 100 or 0 to 255. Basically, the minimum value we want to get from our random number generator is 0 and the maximum value can be whatever we want like 100 or 255.

Multiplying any number with 0 will give us a 0 and multiplication it with 1 will give us the same number back. So, multiplying our desired maximum value, for example 255, with anything between 0 and 1 will give us a number between 0 and 255. However, since Math.random() never gives us 1 exactly we will have to use some other trick to get 255. This can be done by internally increasing the maximum limit by 1.

Here is the implementation of this logic as a function in JavaScript.

function randomInteger(max) {
    return Math.floor(Math.random()*(max + 1));
}

// Outputs a number between 0 and 255 inclusive
console.log(randomInteger(255));

Multiplying a number by some random fraction doesn't always result in integer values. Therefore, we use the Math.floor() function to get rid of the decimal part from our numbers.

Generating Random Colors

We will now write the code to create random colors in RGB, hexand HSL notation.

Generating an RGB Color Value

This requires us to create three random integers in the range 0 and 255. These values will represent the red, green and blue components of our colors. After that, we simply need to do basic string concatenation. Here is our function for generating random RGB color values in JavaScript:

function randomRgbColor() {
    let r = randomInteger(255);
    let g = randomInteger(255);
    let b = randomInteger(255);
    return [r,g,b];
}

for(i = 0; i < 5; i++) {
    console.log(randomRGBColor());
}

/* Example output:
[191, 99, 247]
[162, 94, 201]
[236, 241, 172]
[168, 89, 2]
[161, 42, 113]
*/

Generating a Hex Color Value

Just like the previous example, we will begin by generating a random number between 0 and 255. After that, we will convert those numbers to corresponding hexadecimal values. A simple string concatenation in the end will give us our random color in hex format.

function randomHexColor() {
    let [r,g,b] =randomRgbColor();

    let hr = r.toString(16).padStart(2, '0');
    let hg = g.toString(16).padStart(2, '0');
    let hb = b.toString(16).padStart(2, '0');

    return "#" + hr + hg + hb;
}

for(i = 0; i < 5; i++) {
    console.log(randomHEXColor());
}
/*
#51c18a
#81f582
#8a8446
#0554e1
#a21b18
*/

You might have noticed that we are also using the padStart() function. This is because the random number that we generate will sometimes be represented by a single digit when converted to hexadecimal notation. However, a valid color in this format needs to have 3 or 6 characters. Padding with a 0 at the beginning will give us a total character sequence length of 6.

Generating an HSL Color Value

Color in HSL notation also consist of three numbers. The first one is an angular degree that determines the hue of the color, the second value is in percentage and it determines the saturation of the color, and the third value is used to specify the lightness of the color as a percentage. Hue can range from 0 to 360 while the percentages will vary from 0 to 100.

function randomHslColor() {
    let h = positiveInteger(360);
    let s = positiveInteger(100);
    let l = positiveInteger(100);

    return [h,s,l];
}

for(i = 0; i < 5; i++) {
    console.log(randomHslColor());
}

/*
[346, 83, 88]
[178, 43, 7]
[93, 87, 75]
[291, 29, 85]
[43, 53, 78]
*/

Random Color Generator

Here's a CodePen example of the random color generating functions in action!

Final Thoughts

This quick tip showed you how to generate random colors in JavaScript in three common formats: RGB, hex and HSL. If you want to have transparent colors, you can use the same technique to randomize the opacity of your colors.