Random color generator tool using HTML, CSS and JavaScript

By Samim Raja Mollick

A random color generator palette is a tool that creates a collection of random colors that may be utilized in a variety of design applications. It is built with HTML, CSS and JavaScript.

It usually works by generating a random color code, such as a hexadecimal number, for each color in the palette using an algorithm. Colors may be generated at random or depending on criteria such as color scheme, saturation, and brightness. A random color generator palette's purpose is to give designers and developers a quick and easy approach to producing a collection of colors without having to manually choose and change each one. This can help with activities like establishing visual designs, defining themes, or producing color schemes for data visualization.

First of all, I have designed a basic structure of a webpage with HTML. The HTML document includes a title, a viewport meta tag, a link to an external CSS stylesheet, and a script tag that references a JavaScript file.

The body of the document includes an unordered list with the class "container" and a button with the class "refresh-btn". These elements will likely be used in conjunction with the JavaScript file to dynamically generate and update a color palette.

In the JavaScript program, I have defined two variables those are container which refers to the unordered list element with the class "container" and the refreshBtn which refers to the button element with the class "refresh-btn". It also creates a constant maxPaletteBoxes with the value 32, which represents the maximum number of colors that will be created.

Following that, the "generatePalette" function is defined. This method initially clears the contents of the "container" element by changing its innerHTML to an empty string. Finally, it employs a for loop to produce a new hex color code for each color box by using Math.random() to generate a random integer between 0 and 0xffffff, converting it to a hexadecimal string with .toString(16) and appending a "#" and any required leading zeros with .padStart (6, "0"). It then generates a new list item element with the class "color" and inserts a rectangle with the background color set to the produced hex code, as well as the hex code itself as a child element.

The "copyColor" function takes two arguments: "elem", which is the list item element that was clicked, and "hexVal", which is the hex code of the color that was clicked. First, it uses elem.querySelector(".hex-value") to select the child element of "elem" with the class "hex-value", which contains the hex code. It then uses the Clipboard API to copy the hex code to the user's clipboard. If the copy is successful, it changes the text of "colorElement" to "Copied" and then changes it back to the original hex code after one second. If the copy fails, it displays an alert message to the user.

Lastly, when the page loads, the script invokes the "generatePalette" method to create the basic color palette. It also adds an event listener to the "refreshBtn" button, which when pressed invokes the "generatePalette" method, enabling the user to refresh the color palette.