Random color generator in JavaScript

Colors are an integral part of the look and feel of the website. Whether it might be online or offline, colors make the websites look beautiful and appealing. In JavaScript and HTML elements, color is applied to the background, text, and other elements. Colors are most important because there are several websites designed solely based on color palettes and gradients. Now in this article, let us see how to generate random colors using different ways in JavaScript.

Color Representation

In CSS, colors can be represented with their direct numbers, formatted like RGB (Red, Blue, Green) colors. And also sometimes represented by the hexadecimal values and HSL-specific notations. So, the types in which colors are represented are:

1. RGB Values
2. HSL Notation
3. Hexadecimal Values

Math.random() Method

To generate random numbers, in JavaScript we use Math.random() method function. The function is mainly responsible for the randomly generating of numbers which are pseudo floating point numbers. These pseudo floating point numbers are less than 1 and greater than 0. We can generate numbers in two cases like from 0 to 100 or from 100 to 255.

Generating Random Colors

Now let's generate random numbers which are then represented in the color format using JavaScript and also using different techniques available with CSS. Let's see the top three scenarios where we can implement the generation of random colors. Increasing any number by 0 will give us 0, and duplicating it by 1 will give us a similar number back. So duplicating our ideal most extreme worth - for instance 255 - by anything somewhere in the range of 0 and 1 will give us a number somewhere in the range of 0 and 255. Notwithstanding, since Math.random() never gives us 1 precisely, we should utilize another stunt to get 255. This should be possible by inside expanding the most extreme breaking point by 1.

1. Hexa-Decimal Values

For generating random color using Hexa decimal values, we can make use of Math.random() and Math.floor() for getting the integer values in the range between 0 and 255. Then the random values are generated for colors red, green, blue, and other components. We then can convert these integer values to the two-digit hexadecimal string type such that they are the two digits. Then with the process of concatenation, the two string type hexadecimal are concatenated to form the color code and will be returned as a random color.

Example:

Code:

Output:

2. RGB Color

In RGB values, the RGB indicates the value of colors Red, Green, and Blue. And, the value will be ranged from 0 to 255. Generating in RGB is the same as generating for a hexadecimal method for green, red, and blue components. Here the method used for it is template literals which are constructed and returned as an RGB color string.

Example:

Code:

Output:

3. HSL Color

The notation of HSL consists of three numbers. The three numbers determine three different colors. The first value determines the hue of the color determined by an angular degree value. The second value is a specific percentage of the saturation of the color and the third one is simply the percentage of the lightness of the color. Here the values of the percentages range from 0 to 100 and the angular degree specifically ranges to 360 from 0. In our below logic, strings are constructed and an HSL color string is returned using the template literals.

Example:

Code:

Output:

Now let's see the final implementation of the random color generator in JavaScript using HTML and CSS also. Here, in the below mentioned logic, the random colors are generated using Math.floor function() and using of one of the above techniques. That is using hexadecimal color generation.

Logic

By using the above logic, and also HTML tags we will implement the full code in the below program. CSS styles are also added for the visual appeal of the overall look and feel of the random color generator.

Full Code Implementation

Code

Output:

Conclusion:

This is how we generate random colors in JavaScript using different strategies like hexadecimal values, RGB color schemes, and HSL color notations. All the methods are easy to implement and provide practice of CSS and an understanding of the importance of the visual appearance of a website. The important takeaway from the random color generator is knowing about how Math.random() function works and how different floating-point values are converted into string type literals such that the color is generated is a crucial part of the exercise.