Interactive Color Palette Generator
About this app
Create and explore beautiful color palettes with ease. Share your favorite palettes and inspect colors for design projects.
Interactive Color Palette Generator Color Palette Generator Click the button to generate a new set of color palettes and click on any color box to copy it! Generate New Palette
Related apps
IPTV M3U8 & EPG Generator Studio | Image to M3U Playlist & Guide
Image to IPTV Converter & M3U Playlist Generator
Image to IPTV Converter & M3U Playlist Generator
Image to M3U Playlist Converter | IPTV & Media Stream Generator
Roulette Row Predictor Pro - Live Pattern & Trend Stats Analyzer
Video to Repeated Sequence Generator - Rhythm & Glitch Loop Maker
LoopCraft - Video to Repeated Sequence Converter
LoopMatrix - Video Sequence Repeater & Stutter Maker
MuffleFX - Video & Audio Low-Pass Filter Studio
Seeding Rate Calculator
Irrigation Set Time Calculator
Fertilizer Nutrient Units Calculator
Put this on your site
Source
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Interactive Color Palette Generator</title>
<meta name="description" content="Create and explore beautiful color palettes with ease. Share your favorite palettes and inspect colors for design projects.">
<meta name="keywords" content="color palette, design, creativity, graphics, interactive, tool, color generator">
<!-- Libraries -->
<!-- jQuery (3.6.0) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script>
<!-- Bootstrap CSS (5.3.3) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" crossorigin="anonymous">
<!-- Bootstrap JS (5.3.3) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" crossorigin="anonymous">
</script>
<!-- Font Awesome (6.6.0) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6.0/css/fontawesome.min.css" crossorigin="anonymous">
<script type="text/javascript">
try {
document.addEventListener("DOMContentLoaded", function() {
const colors = [];
const mainContainer = $('#main-container');
const paletteContainer = $('#palette-container');
const generatePaletteBtn = $('#generate-palette');
function generatePalette() {
colors.length = 0; // Clear the colors array
paletteContainer.empty();
for (let i = 0; i < 5; i++) {
const color = '#'+(Math.random()*0xFFFFFF<<0).toString(16).padStart(6, '0');
colors.push(color);
paletteContainer.append(`<div class="color-box" style="background-color: ${color};"><span>${color}</span></div>`);
}
}
function copyColor(color) {
navigator.clipboard.writeText(color).then(() => {
alert(`Color ${color} copied to clipboard!`);
}, (err) => {
console.error('Could not copy color: ', err);
});
}
$(document).on('click', '.color-box', function() {
const color = $(this).find('span').text();
copyColor(color);
});
generatePaletteBtn.on('click', function() {
generatePalette();
});
generatePalette(); // Generate initial palette on load
});
} catch (error) {
throw error;
}
</script>
<style>
body {
background: linear-gradient(120deg, #a6c1ee 0%, #fbc2eb 100%);
font-family: 'Arial', sans-serif;
}
#main-container {
text-align: center;
padding: 2rem 0;
}
#generate-palette {
margin: 1rem;
}
.color-box {
display: inline-block;
width: 100px;
height: 100px;
margin: 5px;
color: white;
line-height: 100px;
border-radius: 8px;
cursor: pointer;
transition: transform 0.2s;
}
.color-box:hover {
transform: scale(1.1);
opacity: 0.9;
}
.color-box span {
display: block;
text-align: center;
font-size: 14px;
text-shadow: 1px 1px 5px rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1 class="display-4">Color Palette Generator</h1>
<p class="lead">Click the button to generate a new set of color palettes and click on any color box to copy it!</p>
<button id="generate-palette" class="btn btn-primary btn-lg">Generate New Palette</button>
<div id="palette-container" class="mt-4"></div>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!