Color plays a vital role in the design and web development. It can make or break a website's visual appeal and influence a user's emotions and perceptions. However, choosing the right color can be challenging, especially when there are so many options available. One solution is to use a random color generator, which generates colors on the fly and helps you discover new color palettes.
In this blog post, we will guide you through the steps to create your own random color generator with a 3D effect using HTML, CSS, and JavaScript. This generator will not only help you generate random colors but also allow you to experiment with complementary colors and copy the generated color code. Additionally, we will create a 3D effect on the background of the color generator, making it more visually appealing.
Whether you're a web developer, designer, or simply someone interested in experimenting with colors, this blog post is for you. By the end of this tutorial, you will have a better understanding of how to generate random colors with a 3D effect and how to apply them to your web development projects. So, let's dive in and create a beautiful and dynamic color generator together!
Let's Set up the Project
Step by step guide to set up basic file structures for the project.
- Create a new folder for your project and name it something descriptive.
- Inside the project folder, create a new file called index.html. This will be your main HTML file.
- Open index.html in a code editor such as Visual Studio Code.
- Inside the head section of index.html, create a new link element that links to your CSS file. The link element should look like this: "<link rel="stylesheet" href="styles.css">" Make sure to replace styles.css with the name of your CSS file.
- Save the changes to index.html.
- In the same project folder, create a new file called styles.css. This will be your main CSS file.
- Open styles.css in a code editor.
- Write your CSS rules inside styles.css.
- Save the changes to styles.css.
- In the head section of index.html, create a new script element that links to your JavaScript file. The script element should look like this: "<script src="script.js"></script>" Make sure to replace script.js with the name of your JavaScript file.
- Save the changes to index.html.
- In the same project folder, create a new file called script.js. This will be your main JavaScript file.
- Open script.js in a code editor.
- Write your JavaScript code inside script.js.
- Save the changes to script.js.
Now you have successfully created a basic HTML, CSS, and JavaScript file and linked them together. Any changes you make to your CSS or JavaScript files will be reflected in your index.html file when you refresh the page.
You may like these:
- How to create a file downloader via url using pure javascript
- Drag & Drop or Sortable List using HTML, CSS, and Sortable JS
- Create Tag Input Box using HTML, CSS, and Javascript
- Custom Select Input with search option in HTML, CSS, and Javascript
Code of HTML, CSS, and JavaScript Files
Here's the good news: you don't have to write all the code of this project from scratch! I have created a GitHub repository that contains all the HTML, CSS, and JavaScript code needed to build the app. You can check it out and use it as a starting point for your own project.
HTML CODE
Just paste this code into HTML File which you have created.
<!-- --------------------- Created By InCoder --------------------- -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Random Color Generator - InCoder</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
</head>
<body>
<div class="copyMsg">
<i class="fa-solid fa-check-circle"></i>
Color Code Copied
</div>
<div class="container">
<div class="wrapper">
<div class="colorWrapper js-tilt" data-tilt>
<span>Click to Copy!</span>
<div class="color"><span></span></div>
</div>
<div class="colorWrapper js-tilt" data-tilt>
<span>Click to Copy!</span>
<div class="color"><span></span></div>
</div>
<div class="colorWrapper js-tilt" data-tilt>
<span>Click to Copy!</span>
<div class="color"><span></span></div>
</div>
<div class="colorWrapper js-tilt" data-tilt>
<span>Click to Copy!</span>
<div class="color"><span></span></div>
</div>
</div>
<div class="wrapper">
<div class="colorWrapper js-tilt" data-tilt>
<span>Click to Copy!</span>
<div class="color"><span></span></div>
</div>
<div class="colorWrapper js-tilt" data-tilt>
<span>Click to Copy!</span>
<div class="color"><span></span></div>
</div>
<div class="colorWrapper js-tilt" data-tilt>
<span>Click to Copy!</span>
<div class="color"><span></span></div>
</div>
<div class="colorWrapper js-tilt" data-tilt>
<span>Click to Copy!</span>
<div class="color"><span></span></div>
</div>
</div>
<button class="refreshColors">Refresh Colors</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
CSS CODE
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
/* --------------------- Created By InCoder --------------------- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
height: 100%;
}
.container {
width: 100%;
padding: 2rem;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
.wrapper {
display: flex;
flex-wrap: wrap;
margin-bottom: 2rem;
align-items: center;
justify-content: center;
}
.colorWrapper {
height: 12rem;
padding: 1rem;
min-width: 10rem;
overflow: hidden;
margin-left: 1rem;
margin-right: 1rem;
position: relative;
margin-bottom: 1rem;
border-radius: 0.2rem;
box-shadow: 0 0 18px 0px #0000004d;
}
.colorWrapper > span {
top: 0;
left: 0;
opacity: 0;
width: 100%;
height: 100%;
color: #fff;
display: flex;
user-select: none;
position: absolute;
align-items: center;
justify-content: center;
content: "Click to Copy!";
background-color: #20202061;
transition: opacity 0.2s ease-in-out;
}
.colorWrapper:hover > span {
opacity: 1;
}
.colorWrapper .color {
height: 80%;
display: flex;
align-items: center;
justify-content: center;
}
.colorWrapper .color span {
bottom: 1.21rem;
user-select: none;
position: absolute;
}
.refreshColors {
border: 0px;
z-index: 1;
color: #fff;
cursor: pointer;
overflow: hidden;
font-size: 1.2rem;
position: relative;
border-radius: 6px;
padding: 0.8rem 2rem;
transform: scale(0.85);
text-decoration: none;
background-position: 5rem;
text-transform: capitalize;
background-color: #b91a58;
}
.refreshColors:focus {
outline: none;
}
.refreshColors::before {
top: 0%;
content: "";
left: -100%;
z-index: -1;
width: 100%;
height: 100%;
color: #fff;
position: absolute;
transition: left 0.4s;
background-color: #202020;
}
.refreshColors:hover::before {
left: 0%;
}
.copyMsg {
z-index: 2;
left: 1rem;
opacity: 0;
display: flex;
height: 3.3rem;
bottom: 1.2rem;
position: fixed;
padding: 0 1rem;
font-size: 1.4rem;
background: #fff;
align-items: center;
transform: scale(0.2);
border-radius: 0.6rem;
transform-origin: center;
border: 0.3rem solid #10c55d;
box-shadow: 0 0 20px rgb(0 0 0 / 50%);
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.copyMsg.active {
opacity: 1;
transform: scale(1);
}
.copyMsg i {
color: #10c55d;
margin-right: 0.6rem;
}
JavaScript CODE
let copyMsg = document.querySelector('.copyMsg')
refreshColors = document.querySelector('.refreshColors')
colorWrapper = document.querySelectorAll('.colorWrapper')
colorDiv = document.querySelectorAll('.color')
const generateRandomColor = () => { // This function generates random color
let colorCode = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
return colorCode
}
const copyColor = (colorCode) => { // This function copies code to clipboard
navigator.clipboard.writeText(colorCode).then(function () {
copyMsg.classList.add('active')
setTimeout(() => {
copyMsg.classList.remove('active')
}, 1500)
}, function (err) {
console.log('Not Copied')
});
}
refreshColors.addEventListener('click', () => {
setColors()
})
// colorWrapper.addEventListener('click', () => {
// setColors()
// })
colorWrapper.forEach((wrapper) => {
wrapper.querySelector("span").addEventListener("click", () => {
let colorCode = wrapper.querySelector(".color").getAttribute('data-color')
copyColor(colorCode);
})
})
const setColors = () => {
colorDiv.forEach(div => {
div.setAttribute('data-color', generateRandomColor())
div.style.backgroundColor = div.dataset.color
div.querySelector('span').innerText = div.dataset.color
div.addEventListener('click', (e) => {
copyColor(e.target.parentElement.dataset.color)
})
})
}
setColors()
$('.js-tilt').tilt({
glare: true,
maxGlare: .3
})
Here is the Final Output of this Code
Hurray! now you've created a Random Color Generator. You can download files by clicking on the download button after downloading file if you are facing any kind of problem feel free to ask me in the comment section and you can also contact me via e-mail. Thanks for giving your precious time for reading this blog. Here is the download button:-