How to Create a Random Hex Colour Generator in React

If you’re looking for the source code, then it’s available in the video.

In this, we’re going to see how to create a full-screen hex colour generator that generates colours randomly.

We’ll create a separate component for generating this colour, and name it RandomColor.

useState

It is used to store the generated colour and also to update the colour on a button click. It’ll help us in updating the colour of the page reactively. 😏

getRgb

• This function is used to get a random value. The range of this function is 0 to 255 (because RGB ranges from 0 to 255 🧐).
• Math.random generates a floating-point value between 0 and 1. On multiplying with n, we will get the value in the range of 0 and n — 1.
• But it’ll still be in decimal, so we can use Math.floorto get the floor round-off value.

rgbToHex

• This function is used to generate the hex code of the colour based on the three values of red, blue, and green.
• We are mapping over these 3 values and applying toString() function over the value. We can provide a radix argument to this function which converts the number as per the base value provided. - Here, we are using 16 which is for hexadecimal numbers because hex code colour is made up of hexadecimal numbers 🧐. Then we are checking whether the length of the result is 1 or more, if it’s 1 then we’re adding 0 in front of it to normalize it.
• At last, we’re joining the array and adding a # in front of the generated string.

handleGenerate

This function is called whenever we click on the button. It creates a colour object and then passes those red, blue, and green values to rgbToHex function. The returned value is used to update the colour.

At last, we are setting the colour to the backgroundColor of the container and text color of the button.

The styling part of the application is done like this.

The container class is just to make sure the whole screen area is used and the button is placed in the centre. transition is just to provide a smooth transition of colour whenever a new colour is generated.

Button styling in order to make it look good. transform and box-shadow are used to provide a 3D effect to the button whenever we hover on the button.

And by doing all this we’ll finally have our random full-screen colour generator complete. It’ll look something like this 🤩👇🏻

That’s it, this is where our journey ends. I hope you were able to reach this point. 😃

Thanks!