Creating a random color palette in HTML, CSS, and JavaScript involves generating random colors using JavaScript and then applying those colors to HTML elements via CSS. Here’s a simple example to demonstrate how you can do this:
1. HTML Structure
First, create a basic HTML structure. You can have a container where your color palettes will be displayed.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Color Palette Generator</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="script.js" defer></script>
</head>
<body>
<ul class="container"></ul>
<button class="refresh-btn">Refresh Palette</button>
</body>
</html>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Color Palette Generator</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="script.js" defer></script>
</head>
<body>
<ul class="container"></ul>
<button class="refresh-btn">Refresh Palette</button>
</body>
</html>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Color Palette Generator</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="script.js" defer></script>
</head>
<body>
<ul class="container"></ul>
<button class="refresh-btn">Refresh Palette</button>
</body>
</html>
2. CSS Styling
Next, add some basic styling to your CSS file to define how the color boxes should look.
/* Import Google font */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
}
body {
background: #E3F2FD;
}
.container {
margin: 20px;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.container .color {
margin: 12px;
padding: 7px;
list-style: none;
cursor: pointer;
text-align: center;
background: #fff;
border-radius: 6px;
box-shadow: 0 10px 25px rgba(52,87,220,0.08);
transition: all 0.3s ease;
}
.container .color:active {
transform: scale(0.95);
}
.color .rect-box {
width: 185px;
height: 188px;
border-radius: 4px;
}
.color:hover .rect-box {
filter: brightness(107%);
}
.color .hex-value {
display: block;
color: #444;
user-select: none;
font-weight: 500;
font-size: 1.15rem;
margin: 12px 0 8px;
text-transform: uppercase;
}
.refresh-btn {
position: fixed;
left: 50%;
bottom: 40px;
color: #fff;
cursor: pointer;
outline: none;
font-weight: 500;
font-size: 1.1rem;
border-radius: 5px;
background: #8A6CFF;
padding: 13px 20px;
border: 2px solid #fff;
transform: translateX(-50%);
box-shadow: 0 15px 30px rgba(52,87,220,0.2);
transition: all 0.3s ease;
}
.refresh-btn:hover {
background: #704dff;
}
@media screen and (max-width: 500px) {
.container {
margin: 10px;
}
.container .color {
margin: 8px;
padding: 5px;
width: calc(100% / 2 - 20px);
}
.color .rect-box {
width: 100%;
height: 148px;
}
.color .hex-value {
font-size: 1.05rem;
}
.refresh-btn {
font-size: 1rem;
}
}
/* Import Google font */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
}
body {
background: #E3F2FD;
}
.container {
margin: 20px;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.container .color {
margin: 12px;
padding: 7px;
list-style: none;
cursor: pointer;
text-align: center;
background: #fff;
border-radius: 6px;
box-shadow: 0 10px 25px rgba(52,87,220,0.08);
transition: all 0.3s ease;
}
.container .color:active {
transform: scale(0.95);
}
.color .rect-box {
width: 185px;
height: 188px;
border-radius: 4px;
}
.color:hover .rect-box {
filter: brightness(107%);
}
.color .hex-value {
display: block;
color: #444;
user-select: none;
font-weight: 500;
font-size: 1.15rem;
margin: 12px 0 8px;
text-transform: uppercase;
}
.refresh-btn {
position: fixed;
left: 50%;
bottom: 40px;
color: #fff;
cursor: pointer;
outline: none;
font-weight: 500;
font-size: 1.1rem;
border-radius: 5px;
background: #8A6CFF;
padding: 13px 20px;
border: 2px solid #fff;
transform: translateX(-50%);
box-shadow: 0 15px 30px rgba(52,87,220,0.2);
transition: all 0.3s ease;
}
.refresh-btn:hover {
background: #704dff;
}
@media screen and (max-width: 500px) {
.container {
margin: 10px;
}
.container .color {
margin: 8px;
padding: 5px;
width: calc(100% / 2 - 20px);
}
.color .rect-box {
width: 100%;
height: 148px;
}
.color .hex-value {
font-size: 1.05rem;
}
.refresh-btn {
font-size: 1rem;
}
}
/* Import Google font */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
}
body {
background: #E3F2FD;
}
.container {
margin: 20px;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.container .color {
margin: 12px;
padding: 7px;
list-style: none;
cursor: pointer;
text-align: center;
background: #fff;
border-radius: 6px;
box-shadow: 0 10px 25px rgba(52,87,220,0.08);
transition: all 0.3s ease;
}
.container .color:active {
transform: scale(0.95);
}
.color .rect-box {
width: 185px;
height: 188px;
border-radius: 4px;
}
.color:hover .rect-box {
filter: brightness(107%);
}
.color .hex-value {
display: block;
color: #444;
user-select: none;
font-weight: 500;
font-size: 1.15rem;
margin: 12px 0 8px;
text-transform: uppercase;
}
.refresh-btn {
position: fixed;
left: 50%;
bottom: 40px;
color: #fff;
cursor: pointer;
outline: none;
font-weight: 500;
font-size: 1.1rem;
border-radius: 5px;
background: #8A6CFF;
padding: 13px 20px;
border: 2px solid #fff;
transform: translateX(-50%);
box-shadow: 0 15px 30px rgba(52,87,220,0.2);
transition: all 0.3s ease;
}
.refresh-btn:hover {
background: #704dff;
}
@media screen and (max-width: 500px) {
.container {
margin: 10px;
}
.container .color {
margin: 8px;
padding: 5px;
width: calc(100% / 2 - 20px);
}
.color .rect-box {
width: 100%;
height: 148px;
}
.color .hex-value {
font-size: 1.05rem;
}
.refresh-btn {
font-size: 1rem;
}
}
3. JavaScript for Generating Random Colors
Now, you can add the JavaScript that will generate random colors and apply them to the color boxes
const container = document.querySelector(".container");
const refreshBtn = document.querySelector(".refresh-btn");
const maxPaletteBoxes = 32;
const generatePalette = () => {
container.innerHTML = ""; // clearing the container
for (let i = 0; i < maxPaletteBoxes; i++) {
// generating a random hex color code
let randomHex = Math.floor(Math.random() * 0xffffff).toString(16);
randomHex = `#${randomHex.padStart(6, "0")}`;
// creating a new 'li' element and inserting it to the container
const color = document.createElement("li");
color.classList.add("color");
color.innerHTML = `<div class="rect-box" style="background: ${randomHex}"></div>
<span class="hex-value">${randomHex}</span>`;
// adding click event to current li element to copy the color
color.addEventListener("click", () => copyColor(color, randomHex));
container.appendChild(color);
}
}
generatePalette();
const copyColor = (elem, hexVal) => {
const colorElement = elem.querySelector(".hex-value");
// Copying the hex value, updating the text to copied,
// and changing text back to original hex value after 1 second
navigator.clipboard.writeText(hexVal).then(() => {
colorElement.innerText = "Copied";
setTimeout(() => colorElement.innerText = hexVal, 1000);
}).catch(() => alert("Failed to copy the color code!")); // showing alert if color can't be copied
}
refreshBtn.addEventListener("click", generatePalette);
const container = document.querySelector(".container");
const refreshBtn = document.querySelector(".refresh-btn");
const maxPaletteBoxes = 32;
const generatePalette = () => {
container.innerHTML = ""; // clearing the container
for (let i = 0; i < maxPaletteBoxes; i++) {
// generating a random hex color code
let randomHex = Math.floor(Math.random() * 0xffffff).toString(16);
randomHex = `#${randomHex.padStart(6, "0")}`;
// creating a new 'li' element and inserting it to the container
const color = document.createElement("li");
color.classList.add("color");
color.innerHTML = `<div class="rect-box" style="background: ${randomHex}"></div>
<span class="hex-value">${randomHex}</span>`;
// adding click event to current li element to copy the color
color.addEventListener("click", () => copyColor(color, randomHex));
container.appendChild(color);
}
}
generatePalette();
const copyColor = (elem, hexVal) => {
const colorElement = elem.querySelector(".hex-value");
// Copying the hex value, updating the text to copied,
// and changing text back to original hex value after 1 second
navigator.clipboard.writeText(hexVal).then(() => {
colorElement.innerText = "Copied";
setTimeout(() => colorElement.innerText = hexVal, 1000);
}).catch(() => alert("Failed to copy the color code!")); // showing alert if color can't be copied
}
refreshBtn.addEventListener("click", generatePalette);
const container = document.querySelector(".container");
const refreshBtn = document.querySelector(".refresh-btn");
const maxPaletteBoxes = 32;
const generatePalette = () => {
container.innerHTML = ""; // clearing the container
for (let i = 0; i < maxPaletteBoxes; i++) {
// generating a random hex color code
let randomHex = Math.floor(Math.random() * 0xffffff).toString(16);
randomHex = `#${randomHex.padStart(6, "0")}`;
// creating a new 'li' element and inserting it to the container
const color = document.createElement("li");
color.classList.add("color");
color.innerHTML = `<div class="rect-box" style="background: ${randomHex}"></div>
<span class="hex-value">${randomHex}</span>`;
// adding click event to current li element to copy the color
color.addEventListener("click", () => copyColor(color, randomHex));
container.appendChild(color);
}
}
generatePalette();
const copyColor = (elem, hexVal) => {
const colorElement = elem.querySelector(".hex-value");
// Copying the hex value, updating the text to copied,
// and changing text back to original hex value after 1 second
navigator.clipboard.writeText(hexVal).then(() => {
colorElement.innerText = "Copied";
setTimeout(() => colorElement.innerText = hexVal, 1000);
}).catch(() => alert("Failed to copy the color code!")); // showing alert if color can't be copied
}
refreshBtn.addEventListener("click", generatePalette);
4. Explanation
- HTML: The structure includes a container for color boxes and a button to generate random colors.
- CSS: Provides basic styling to make the color boxes look nice and centers everything on the page.
- JavaScript: The
getRandomColor()function generates a random hex color code. ThegenerateRandomColors()function applies these colors to each.color-box. The button triggers the color generation when clicked.
5. Running the Code
To see it in action, you can create three files (index.html, styles.css, and script.js), paste the corresponding code into each, and open the index.html file in your browser. Each time you click the button, the color palette will update with new random colors.
+91 7905834592
Enquiry Now
piyushmnm@gmail.com
piyush.gupta384
Reviews
There are no reviews yet. Be the first one to write one.