See the Pen
As you can see above, this is a very nice and simple project. First I designed the webpage. Then I made a box here. I first gave a heading in that box. Then there is a display where random color can be seen to be generated. Then there is a small box where the color code can be found.
I have created two buttons at the end of all. To generate one color and copy another color. Each time you click on the Generate button, there will be a different color general at random. If you want to copy that color code, the copy button will help.
Here you have complete step-by-step tutorials that will help you know which code works. First, you create an HTML and CSS file.
Step 1: Basic structure of Color Generator
I have created the basic structure of this color generator using the following HTML and CSS code. A small box has been created on the page where all the information will be added. The background color of the box is white.
Step 2: Add a heading using HTML
Now I have added a heading in this box using the following codes. It basically enhances the beauty. For this, I have used the h1 tag of HTML and designed it with the help of CSS.
Step 3: Create a display for color viewing
Now HTML and CSS code have helped to create the display. The display is basically for viewing by generating colors. Whenever you click on the generator button, you can see the color in this display. Its width is 100% and height is 30vmin. Box-shadow has been used to enhance beauty.
I have added a kind of animation using the below CSS. There will be a kind of animation whenever this color can be seen in the display.
Step 4: Create a box to view the color code
Now I have created a small box where the code of this generated color can be seen.
Step 5: Create a generator and copy button
Now I have created two buttons to generate the color and to copy the color. The width of the button is 120px and the height depends on the padding.
Now the following CSS codes have helped to add different background colors for the two buttons. The first button has added blue color to the case. I have added red color in the second case. You can change the background color to your liking.
First I set the color display, the color code, and the ID function of the two buttons one by one.
Now I have used HexString. It is a binary value that combines with each other to form colors.
Now I have activated the copy button. This button will help you to copy the color code that will be created above.
Now I have activated the generate button. I have created a system to generate a color. Now I have been instructed to implement that genHexCode system. That system will work whenever you click on the Generate button. This will create color and can be seen in the display.