Creation chat
ClarkZhang
create a color set solution for designer.
02-25 09:11
暂无回复
No comments yet
登录 后可以评论
Assistant
# Color Palette Generator for Designers
I'll create a responsive color palette generator that allows designers to create, save, and export color schemes. This tool will help designers quickly generate harmonious color palettes and manage their color collections.
(HTML code has been generated and updated; see above for the current version.)
## Features of the Color Palette Generator
This designer tool provides the following functionality:
1. **Palette Generation**: Create random color palettes with one click
2. **Color Locking**: Lock specific colors to preserve them when generating new palettes
3. **Manual Color Adjustment**: Fine-tune individual colors using color pickers
4. **Color Copying**: Easily copy hex codes to clipboard with a single click
5. **Palette Saving**: Save favorite palettes for later use
6. **Palette Loading**: Load previously saved palettes
7. **Palette Deletion**: Remove unwanted saved palettes
8. **Export Functionality**: Export palettes as CSS variables
9. **Responsive Design**: Works beautifully on all device sizes
10. **Dark/Light Mode**: Toggle between color schemes based on preference
The tool uses localStorage to persist saved palettes between sessions and provides a clean, modern interface with smooth animations and transitions.
To use the tool, simply click "Generate New Palette" to create a random color scheme. You can lock colors you like, adjust individual colors, save palettes for later, and export them as CSS variables.
The console is available in the bottom-right of the preview if you need to inspect any logs.
▼ Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color Palette Generator | Designer Tool</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>tailwind.config = { darkMode: 'class' }</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.color-swatch {
transition: all 0.3s ease;
}
.color-swatch:hover {
transform: scale(1.05);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.lock-icon {
transition: all 0.2s ease;
}
.lock-icon:hover {
transform: scale(1.2);
}
.palette-card {
transition: all 0.3s ease;
}
.palette-card:hover {
transform: translateY(-5px);
}
.color-input {
width: 100px;
}
.color-input::-webkit-color-swatch {
border: none;
border-radius: 0.375rem;
}
.color-input::-webkit-color-swatch-wrapper {
padding: 0;
}
.toast {
animation: fadeOut 3s forwards;
}
@keyframes fadeOut {
0% { opacity: 1; }
80% { opacity: 1; }
100% { opacity: 0; }
}
</style>
</head>
<body class="min-h-screen bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-slate-100">
<!-- Theme toggle button -->
<button id="theme-toggle-btn" class="fixed top-4 right-4 z-10 p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition-colors flex items-center justify-center" aria-label="Toggle theme" onclick="toggleTheme()">
<svg id="icon-moon" class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998z"/></svg>
<svg id="icon-sun" class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" aria-hidden="true" style="display:none"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"></path></svg>
</button>
<script>
function toggleTheme(){ var el=document.documentElement; var isDark=!el.classList.contains('dark'); el.classList.toggle('dark',isDark); localStorage.setItem('theme',isDark?'dark':'light'); applyTheme(isDark); }
function applyTheme(isDark){ document.getElementById('icon-moon').style.display=isDark?'none':'block'; document.getElementById('icon-sun').style.display=isDark?'block':'none'; }
document.addEventListener('DOMContentLoaded',function(){ var saved=localStorage.getItem('theme'); var isDark=saved==='dark'||(!saved&&window.matchMedia('(prefers-color-scheme: dark)').matches); document.documentElement.classList.toggle('dark',isDark); applyTheme(isDark); });
</script>
<!-- Custom modal -->
<div id="custom-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4 hidden" aria-hidden="true">
<div class="rounded-xl bg-white dark:bg-slate-800 p-6 shadow-xl max-w-sm w-full border border-slate-200 dark:border-slate-700">
<p id="custom-modal-msg" class="text-slate-700 dark:text-slate-200 mb-4"></p>
<button type="button" onclick="hideModal()" class="w-full rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600">OK</button>
</div>
</div>
<script>
function showModal(msg){ var el=document.getElementById('custom-modal'); document.getElementById('custom-modal-msg').textContent=msg||''; el.classList.remove('hidden'); }
function hideModal(){ document.getElementById('custom-modal').classList.add('hidden'); }
</script>
<!-- Toast notification -->
<div id="toast" class="fixed top-20 right-4 z-50 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg toast hidden"></div>
<header class="bg-white dark:bg-slate-800 shadow-sm">
<div class="container mx-auto px-4 py-6">
<div class="flex flex-col md:flex-row justify-between items-center">
<div>
<h1 class="text-3xl font-bold text-slate-900 dark:text-white">Color Palette Generator</h1>
<p class="text-slate-600 dark:text-slate-400 mt-2">Create beautiful color schemes for your designs</p>
</div>
<div class="mt-4 md:mt-0">
<button id="generate-btn" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg transition flex items-center">
<i class="fas fa-sync-alt mr-2"></i> Generate New Palette
</button>
</div>
</div>
</div>
</header>
<main class="container mx-auto px-4 py-8">
<!-- Current Palette Section -->
<section class="mb-12">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold">Current Palette</h2>
<div class="flex space-x-3">
<button id="save-palette-btn" class="bg-emerald-600 hover:bg-emerald-700 text-white font-medium py-2 px-4 rounded-lg transition flex items-center">
<i class="fas fa-save mr-2"></i> Save Palette
</button>
<button id="export-palette-btn" class="bg-amber-600 hover:bg-amber-700 text-white font-medium py-2 px-4 rounded-lg transition flex items-center">
<i class="fas fa-download mr-2"></i> Export
</button>
</div>
</div>
<!-- Color Swatches -->
<div id="color-swatches" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-4 mb-8">
<!-- Swatches will be generated here -->
</div>
<!-- Color Controls -->
<div id="color-controls" class="bg-white dark:bg-slate-800 rounded-xl shadow-md p-6">
<h3 class="text-xl font-semibold mb-4">Adjust Colors</h3>
<div id="color-inputs" class="grid grid-cols-1 md:grid-cols-5 gap-4">
<!-- Color inputs will be generated here -->
</div>
</div>
</section>
<!-- Saved Palettes Section -->
<section>
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold">Saved Palettes</h2>
<button id="clear-palettes-btn" class="text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 font-medium flex items-center">
<i class="fas fa-trash-alt mr-2"></i> Clear All
</button>
</div>
<div id="saved-palettes" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Saved palettes will be loaded here -->
</div>
</section>
</main>
<footer class="bg-white dark:bg-slate-800 border-t border-slate-200 dark:border-slate-700 py-8 mt-12">
<div class="container mx-auto px-4 text-center">
<p class="text-slate-600 dark:text-slate-400">Color Palette Generator © 2023 | Designed for designers</p>
<p class="text-slate-500 dark:text-slate-500 text-sm mt-2">Create, save, and export beautiful color schemes</p>
</div>
</footer>
<script>
// DOM Elements
const colorSwatches = document.getElementById('color-swatches');
const colorInputs = document.getElementById('color-inputs');
const savedPalettes = document.getElementById('saved-palettes');
const generateBtn = document.getElementById('generate-btn');
const savePaletteBtn = document.getElementById('save-palette-btn');
const exportPaletteBtn = document.getElementById('export-palette-btn');
const clearPalettesBtn = document.getElementById('clear-palettes-btn');
const toast = document.getElementById('toast');
// State
let currentPalette = [];
let savedPaletteList = JSON.parse(localStorage.getItem('savedPalettes')) || [];
// Initialize
document.addEventListener('DOMContentLoaded', () => {
generatePalette();
renderSavedPalettes();
});
// Generate a random hex color
function generateRandomColor() {
return '#' + Math.floor(Math.random()*16777215).toString(16).padStart(6, '0');
}
// Generate a palette of 5 colors
function generatePalette() {
currentPalette = [];
for (let i = 0; i < 5; i++) {
currentPalette.push(generateRandomColor());
}
renderCurrentPalette();
}
// Render the current palette
function renderCurrentPalette() {
// Clear existing content
colorSwatches.innerHTML = '';
colorInputs.innerHTML = '';
// Create swatches and inputs
currentPalette.forEach((color, index) => {
// Color swatch
const swatch = document.createElement('div');
swatch.className = 'color-swatch rounded-xl shadow-md overflow-hidden cursor-pointer';
swatch.style.backgroundColor = color;
swatch.innerHTML = `
<div class="p-4 flex flex-col h-full">
<div class="flex justify-between items-start mb-2">
<button class="lock-icon text-white/80 hover:text-white" data-index="${index}">
<i class="fas fa-lock-open"></i>
</button>
<button class="text-white/80 hover:text-white" onclick="copyColorToClipboard('${color}')">
<i class="fas fa-copy"></i>
</button>
</div>
<div class="mt-auto">
<p class="text-white font-mono text-sm">${color.toUpperCase()}</p>
</div>
</div>
`;
colorSwatches.appendChild(swatch);
// Color input
const inputContainer = document.createElement('div');
inputContainer.className = 'flex flex-col items-center';
inputContainer.innerHTML = `
<input type="color" value="${color}" class="color-input h-12 rounded-lg mb-2" data-index="${index}">
<p class="text-slate-700 dark:text-slate-300 text-sm font-mono">${color.toUpperCase()}</p>
`;
colorInputs.appendChild(inputContainer);
});
// Add event listeners to lock buttons
document.querySelectorAll('.lock-icon').forEach(button => {
button.addEventListener('click', toggleLock);
});
// Add event listeners to color inputs
document.querySelectorAll('input[type="color"]').forEach(input => {
input.addEventListener('input', updateColor);
});
}
// Toggle color lock
function toggleLock(e) {
const index = parseInt(e.currentTarget.getAttribute('data-index'));
const icon = e.currentTarget.querySelector('i');
if (icon.classList.contains('fa-lock-open')) {
icon.classList.remove('fa-lock-open');
icon.classList.add('fa-lock');
e.currentTarget.classList.add('text-blue-400');
} else {
icon.classList.remove('fa-lock');
icon.classList.add('fa-lock-open');
e.currentTarget.classList.remove('text-blue-400');
}
}
// Update color in palette
function updateColor(e) {
const index = parseInt(e.target.getAttribute('data-index'));
const newColor = e.target.value;
currentPalette[index] = newColor;
renderCurrentPalette();
}
// Save current palette
function savePalette() {
const palette = {
id: Date.now(),
colors: [...currentPalette],
name: `Palette ${savedPaletteList.length + 1}`,
date: new Date().toLocaleDateString()
};
savedPaletteList.push(palette);
localStorage.setItem('savedPalettes', JSON.stringify(savedPaletteList));
renderSavedPalettes();
showToast('Palette saved successfully!');
}
// Render saved palettes
function renderSavedPalettes() {
savedPalettes.innerHTML = '';
if (savedPaletteList.length === 0) {
savedPalettes.innerHTML = `
<div class="col-span-full text-center py-12">
<i class="fas fa-palette text-4xl text-slate-400 mb-4"></i>
<h3 class="text-xl font-medium text-slate-600 dark:text-slate-400">No saved palettes yet</h3>
<p class="text-slate-500 dark:text-slate-500 mt-2">Create and save your first color palette</p>
</div>
`;
return;
}
savedPaletteList.forEach(palette => {
const paletteCard = document.createElement('div');
paletteCard.className = 'palette-card bg-white dark:bg-slate-800 rounded-xl shadow-md overflow-hidden border border-slate-200 dark:border-slate-700';
paletteCard.innerHTML = `
<div class="flex">
${palette.colors.map(color => `
<div class="flex-1 h-24" style="background-color: ${color};"></div>
`).join('')}
</div>
<div class="p-4">
<div class="flex justify-between items-start">
<h3 class="font-semibold text-lg">${palette.name}</h3>
<button class="text-slate-500 hover:text-red-500" onclick="deletePalette(${palette.id})">
<i class="fas fa-trash"></i>
</button>
</div>
<p class="text-slate-500 dark:text-slate-400 text-sm mt-1">${palette.date}</p>
<div class="flex flex-wrap gap-2 mt-3">
${palette.colors.map(color => `
<span class="text-xs px-2 py-1 rounded" style="background-color: ${color}; color: ${getContrastColor(color)}">${color.toUpperCase()}</span>
`).join('')}
</div>
<button class="w-full mt-4 bg-slate-100 dark:bg-slate-700 hover:bg-slate-200 dark:hover:bg-slate-600 text-slate-800 dark:text-slate-200 py-2 rounded-lg transition" onclick="loadPalette(${palette.id})">
Load Palette
</button>
</div>
`;
savedPalettes.appendChild(paletteCard);
});
}
// Load a saved palette
function loadPalette(id) {
const palette = savedPaletteList.find(p => p.id === id);
if (palette) {
currentPalette = [...palette.colors];
renderCurrentPalette();
showToast('Palette loaded successfully!');
}
}
// Delete a saved palette
function deletePalette(id) {
savedPaletteList = savedPaletteList.filter(palette => palette.id !== id);
localStorage.setItem('savedPalettes', JSON.stringify(savedPaletteList));
renderSavedPalettes();
showToast('Palette deleted!');
}
// Clear all saved palettes
function clearAllPalettes() {
if (savedPaletteList.length === 0) {
showToast('No palettes to clear');
return;
}
if (confirm('Are you sure you want to delete all saved palettes?')) {
savedPaletteList = [];
localStorage.removeItem('savedPalettes');
renderSavedPalettes();
showToast('All palettes cleared!');
}
}
// Export palette as CSS
function exportPalette() {
if (currentPalette.length === 0) {
showToast('No palette to export');
return;
}
let css = ':root {\n';
currentPalette.forEach((color, index) => {
css += ` --color-${index + 1}: ${color};\n`;
});
css += '}\n\n';
css += '/* Example usage */\n';
css += '.example {\n';
css += ` background-color: var(--color-1);\n`;
css += ` color: var(--color-2);\n`;
css += '}';
// Create download link
const blob = new Blob([css], { type: 'text/css' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'color-palette.css';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
showToast('CSS file downloaded!');
}
// Copy color to clipboard
function copyColorToClipboard(color) {
navigator.clipboard.writeText(color).then(() => {
showToast(`Copied ${color} to clipboard!`);
});
}
// Show toast notification
function showToast(message) {
toast.textContent = message;
toast.classList.remove('hidden');
toast.classList.add('toast');
setTimeout(() => {
toast.classList.add('hidden');
toast.classList.remove('toast');
}, 3000);
}
// Get contrast color for text
function getContrastColor(hexColor) {
// Convert hex to RGB
const r = parseInt(hexColor.substr(1, 2), 16);
const g = parseInt(hexColor.substr(3, 2), 16);
const b = parseInt(hexColor.substr(5, 2), 16);
// Calculate brightness
const brightness = (r * 299 + g * 587 + b * 114) / 1000;
// Return black or white based on brightness
return brightness > 128 ? '#000000' : '#FFFFFF';
}
// Event Listeners
generateBtn.addEventListener('click', generatePalette);
savePaletteBtn.addEventListener('click', savePalette);
exportPaletteBtn.addEventListener('click', exportPalette);
clearPalettesBtn.addEventListener('click', clearAllPalettes);
</script>
</body>
</html>
02-25 09:14
暂无回复
No comments yet
登录 后可以评论
Comments
暂无回复
No comments yet
登录 后可以评论