Random Color Picker Web Tool

Often it's hard to describe the color perfect for our use case. You might have a general idea of "orange" or "purple", but it isn't until you see the proper shade and blend of colors can you say definitively, "That's the one!"

How you go about finding that ideal color choice is a tough task, however. Color wheels, RBG toggles, and other tools hand the reigns off to the user to craft that perfect color. Often times a simpler, more casual approach is preferred: randomly generating a color!

Coolors is the ultimate tool for randomly generating palettes and colors. With a few strokes of the keyboard, you can craft an appealing palette whilst having the reigns within arms reach to tweak the results. To practice my web dev skills, I decided to try my hand at creating a simple, single-color generator.

The project was pretty simple: use HTML, CSS, and JavaScript to build a tool that will randomly generate a color, set it as the background of the webpage, and display the associated hex code. See the below animation for what I intended (and ultimately) built:

Building the Generator

As you might be able to tell from the animation, the HTML and CSS was pretty basic. A couple divs to organize everthing neatly and a button (stylized to blend in with the white box) labeled "Generate New Color" are most of all the HTML components. On the CSS end, the core component was setting a variable for the changing color in the ":root".

The bulk of this mini-project was on the JavaScript end. The aforementioned button triggers a function when clicked. The function (below) randomly generates Red, Green, and Blue values that are returned as a converted hexadecimal value.

We can see several components in this function: the loop, the random number generation, and the switch/case statement.

The purpose of the loop is so we can use the same code repeatedly to generate 6 values that, with the "#", make up a hexadecimal color value.

The random number generator will give us a decimal value between 0 (inclusive) and 1 (exclusive). We'll multiply that value by 16 and round down to the nearest integer. This results in a maximum value of 15 and a minimum value of 0 — the exact range we need.

Because hexadecimal is base 16, letters "A - F" are used in place of numbers "10 - 15". The switch/case statement converts those double digit integers to their letter equivalents. It's placed inside a loop to generate 6 values that, with a the "#", make up the hexadecimal color value.

This function is placed inside another function so we can use the value for multiple purposes. We can see that not only the background color changes, but we are updating the hex code being displayed and changing the text color of the button.

We take care of the first and third steps by utilizing the CSS variable declared in the ":root", as previously mentioned. We're able to complete the second task by changing the inner HTML text by the element ID we specified.

We now have an excellent working random color picker web tool!

This was a fun little project to give me greater exposure to the methods inherent to JavaScript for interacting with HTML and CSS documents. It's crucial to be familiar with these methods since they fascilitate a powerful, native interface for the program.

Looking back, I can definitely explore ways to improve the function so as to eliminate the switch/case statement. Perhaps there's a native array of English alphabet characters that could be referenced by index if the randomly generated integer is greater than 9.

Looking ahead, there are several ways to build on this foundation: 1) providing additional color code formats, 2) generating shades within a color family (i.e. just "orange"), or 3) perhaps allowing for multiple generators side-by-side like Coolors does.

The latter idea would allow for practice with classes and objects, but likely requires a framework, if I understand correctly.