Welcome to today’s tutorial. Today we will learn how to create a random hex colour code generator. For this project, we will be using HTML, CSS and Javascript. If you are a beginner looking for a project to improve your javascript skills, then this is perfect for you.
The Random Hex Code Generator has two main functions. Firstly, Generate a hex code and Secondly, copy it to the clipboard. It even displays the preview of the colour.
Video Tutorial:
I have a video version of this tutorial on my youtube channel. If you are interested, you can check it here down below.
Project Folder Structure:
Let us take a quick look at the project folder structure. The project folder consists of three files. First is the HTML document – index.html, Second is the stylesheet – style.css, and last is the javascript file – script.js.
HTML:
We start with the HTML code. Copy the code below and paste it into your HTML file. HTML consists of a container div. Inside this, we have a div with an id called output-color. output-color includes a span element. Next, we have an input type text with a read-only attribute.
Following the input text, we have a div with class btns. It includes two buttons – Generate and copy.After the container, we have div with class name custom-alert. It consists of text – “Hex Code Copied”.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Random Hex Color Code</title>
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@600&display=swap" rel="stylesheet">
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div id="output-color">
<span></span>
</div>
<input type="text" id="output" readonly>
<div class="btns">
<button id="gen-btn">Generate</button>
<button id="copy-btn">Copy</button>
</div>
</div>
<div class="custom-alert">Hex Code Copied</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
CSS:
Now coming to the CSS. Copy the code provided below and paste it into your stylesheet. We do the CSS reset to remove unwanted margins and paddings. Next, we set the font family of all the elements to “Roboto Mono”.
We set the background color of the body to ‘#121317’ and that of the container to ‘202229#’.
In the next step, we set the dimensions of the container and centre it using transforms. The output-color is shaped into a circle by setting the border-radius to 50%. We do a similar thing for the span element inside the output-color.
We create a show-color class that consists of animation called pop with a duration of 0.8 seconds. In the coming steps, we will be using this class with javascript to add a smooth transition effect to the output-color.
To make the input text pop out we add a dashed border to it. We also set the selection colour to transparent with the selection pseudo-element.
The styling of buttons and custom-alert is quite self-explanatory. You can use your creativity to style them as you like.
*{
padding: 0;
margin: 0;
box-sizing: border-box;
border: none;
outline: none;
font-family: "Roboto Mono", monospace;
}
body{
background-color: #121317;
}
.container{
background-color: #202229;
width: 60vmin;
padding: 2.5em 2em;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
font-size: 3vmin;
border-radius: 10px;
}
#output-color{
position: relative;
height: 30vmin;
width: 30vmin;
border: 0.5em solid #f5f5f5;
border-radius: 50%;
margin: auto;
display: grid;
place-items: center;
}
#output-color span{
display: block;
width: calc( 100% - 20px );
height: calc( 100% - 20px);
border-radius: 50%;
}
.show-color{
animation: pop 0.8s;
}
@keyframes pop{
0%{
transform: scale(0);
}
100%{
transform: scale(1);
}
}
input[type="text"]{
width: 100%;
background-color: transparent;
border: 2.5px dashed #f5f5f5;
font-size: 1.3em;
padding: 0.8em 0;
margin: 1em 0;
border-radius: 8px;
color: #f5f5f5;
text-align: center;
}
input[type="text"]::-moz-selection{
background: transparent;
}
input[type="text"]::selection{
background: transparent;
}
.btns{
display: flex;
justify-content: space-around;
}
.btns button{
font-size: 1em;
padding: 0.8em 1.7em;
border-radius: 7px;
font-weight: 600;
cursor: pointer;
}
#gen-btn{
background-color: #18f98f;
color: #202229;
}
#copy-btn{
border: 3px solid #18f98f;
background-color: transparent;
color: #18f98f;
}
.custom-alert{
background-color: rgba(255,255,255,0.3);
font-size: 2.5vmin;
padding: 1em 1.5em;
position: fixed;
top: 10px;
right: 10px;
color: #f5f5f5;
transition: 0.5s;
transform: translateX(calc(100% + 10px));
}
Javascript:
We now code the javascript. Copy the code below and paste it into your javascript file. Firstly we select all the necessary elements and assign them to variables. Also, we create a variable called hexString whose value is ‘0123456789abcdef’
We create a function called genHexCode(). Inside this function, we have a for loop that selects 6 random characters from the hexString and concatenates them to the hexCode string.
This creates a random hex code value. We use this value to set the background color for outputColor. Also, we use this hex code as the value for the output element.
As said earlier we use show-color to add transition every time the user clicks on generate buttons. This is done by adding and removing the show-color class in combination with setTimeout function.
Lastly, we add a click event listener to the copyBtn. To know more about copying text from a clipboard you can check out this tutorial here. Your random hex code generator is now ready.
let outputColor = document.querySelector("#output-color span");
let output = document.getElementById("output");
let genBtn = document.getElementById("gen-btn");
let copyBtn = document.getElementById("copy-btn");
let customAlert = document.querySelector(".custom-alert");
let hexString = "0123456789abcdef";
let genHexCode = () => {
let hexCode = "#";
for( i = 0; i < 6; i++){
hexCode += hexString[Math.floor(Math.random() * hexString.length)];
}
output.value = hexCode;
outputColor.classList.remove("show-color");
setTimeout( () => {
outputColor.classList.add("show-color");
},10);
outputColor.style.backgroundColor = hexCode;
}
copyBtn.addEventListener("click", () => {
output.select();
document.execCommand("copy");
customAlert.style.transform = "translateX(0)";
setTimeout( () => {
customAlert.style.transform = "translateX( calc( 100% + 10px ))";
}, 2000);
});
window.onload = genHexCode;
genBtn.addEventListener("click", genHexCode);
If you have any problems while creating this project you can download the source code by clicking on the download button below. Also, you can comment down your suggestions and feedback down below.
