配色パレット生成器

配色パターン

補色

類似色

三角配色

分割補色

同系色

パレット

${color.toUpperCase()}

${rgbString}

`; grid.appendChild(card); }); } function toggleLock(index) { lockedColors[index] = !lockedColors[index]; const baseColor = document.getElementById('baseColor').value; const mode = document.querySelector('input[name="mode"]:checked').value; generatePalette(); } function copyToClipboard(text) { navigator.clipboard.writeText(text).then(() => { showToast('コピーしました'); }).catch(() => { showToast('コピーに失敗しました'); }); } function copyPalette() { const colors = Array.from(document.querySelectorAll('.color-value')).map(el => el.textContent.trim()); if (colors.length === 0) { showToast('パレットが生成されていません'); return; } const text = colors.join('\n'); navigator.clipboard.writeText(text).then(() => { showToast('パレットをコピーしました'); }).catch(() => { showToast('コピーに失敗しました'); }); } function randomizeBaseColor() { const randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0'); document.getElementById('baseColor').value = randomColor; document.getElementById('baseColorHex').value = randomColor; generatePalette(); } function showToast(message) { const toast = document.getElementById('toast'); toast.textContent = message; toast.classList.add('show'); setTimeout(() => { toast.classList.remove('show'); }, 2000); } document.getElementById('baseColor').addEventListener('input', (e) => { document.getElementById('baseColorHex').value = e.target.value; generatePalette(); }); document.querySelectorAll('input[name="mode"]').forEach(radio => { radio.addEventListener('change', generatePalette); }); // Initial generation window.addEventListener('load', generatePalette);

カラーパレット生成とは？

配色パレットを自動生成するツールです。ベースカラーから配色理論に基づいたパレットを生成します。

こんな時に便利

Webデザインの配色決め
ブランドカラーの展開
UIデザインの色選定
プレゼン資料の配色

このツールはブラウザ上で完全に動作します。入力データがサーバーに送信されることはありません。