カラーピッカー Color Picker
色を視覚的に選択できるインタラクティブなフォーム要素。
ライブデモ
プレビュー
ソースコード
<div class="demo-colorpicker">
<label class="demo-colorpicker-label">カラーを選択</label>
<div class="demo-colorpicker-main">
<div class="demo-colorpicker-presets">
<button class="demo-colorpicker-swatch" data-color="#2563eb" style="background:#2563eb;" title="#2563eb"></button>
<button class="demo-colorpicker-swatch" data-color="#7c3aed" style="background:#7c3aed;" title="#7c3aed"></button>
<button class="demo-colorpicker-swatch" data-color="#db2777" style="background:#db2777;" title="#db2777"></button>
<button class="demo-colorpicker-swatch" data-color="#dc2626" style="background:#dc2626;" title="#dc2626"></button>
<button class="demo-colorpicker-swatch" data-color="#ea580c" style="background:#ea580c;" title="#ea580c"></button>
<button class="demo-colorpicker-swatch" data-color="#ca8a04" style="background:#ca8a04;" title="#ca8a04"></button>
<button class="demo-colorpicker-swatch" data-color="#16a34a" style="background:#16a34a;" title="#16a34a"></button>
<button class="demo-colorpicker-swatch" data-color="#0d9488" style="background:#0d9488;" title="#0d9488"></button>
<button class="demo-colorpicker-swatch" data-color="#1d4ed8" style="background:#1d4ed8;" title="#1d4ed8"></button>
<button class="demo-colorpicker-swatch" data-color="#334155" style="background:#334155;" title="#334155"></button>
</div>
<div class="demo-colorpicker-custom">
<input class="demo-colorpicker-native" type="color" value="#2563eb" />
<input class="demo-colorpicker-hex" type="text" value="#2563eb" maxlength="7" placeholder="#000000" />
</div>
<div class="demo-colorpicker-preview-area">
<div class="demo-colorpicker-preview-box"></div>
<span class="demo-colorpicker-preview-label">プレビュー</span>
</div>
</div>
</div>.demo-colorpicker { max-width: 300px; }
.demo-colorpicker-label { display: block; font-size: 13px; font-weight: 600; color: #333; margin-bottom: 10px; }
.demo-colorpicker-main { display: flex; flex-direction: column; gap: 12px; }
.demo-colorpicker-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.demo-colorpicker-swatch {
width: 32px; height: 32px; border-radius: 8px; border: 2px solid transparent;
cursor: pointer; transition: transform 0.15s, border-color 0.15s;
}
.demo-colorpicker-swatch:hover { transform: scale(1.1); }
.demo-colorpicker-swatch.active { border-color: var(--ui-primary); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ui-primary); }
.demo-colorpicker-custom { display: flex; gap: 8px; align-items: center; }
.demo-colorpicker-native {
width: 40px; height: 36px; border: none; border-radius: 6px;
cursor: pointer; padding: 0; background: none;
}
.demo-colorpicker-hex {
flex: 1; padding: 8px 10px; border: 2px solid #d1d5db; border-radius: 8px;
font-size: 14px; font-family: monospace; outline: none;
transition: border-color 0.2s;
}
.demo-colorpicker-hex:focus { border-color: var(--ui-primary); }
.demo-colorpicker-preview-area { display: flex; align-items: center; gap: 10px; }
.demo-colorpicker-preview-box {
width: 48px; height: 48px; border-radius: 10px;
background: var(--ui-primary); border: 2px solid rgba(0,0,0,0.08);
transition: background 0.2s;
}
.demo-colorpicker-preview-label { font-size: 12px; color: #6b7280; }(function(){
var swatches = document.querySelectorAll('.demo-colorpicker-swatch');
var native = document.querySelector('.demo-colorpicker-native');
var hex = document.querySelector('.demo-colorpicker-hex');
var preview = document.querySelector('.demo-colorpicker-preview-box');
function setColor(color) {
hex.value = color;
native.value = color;
preview.style.background = color;
swatches.forEach(function(s) {
s.classList.toggle('active', s.dataset.color === color);
});
}
swatches.forEach(function(s) {
s.addEventListener('click', function() { setColor(this.dataset.color); });
});
native.addEventListener('input', function() { setColor(this.value); });
hex.addEventListener('input', function() {
if (/^#[0-9a-fA-F]{6}$/.test(this.value)) setColor(this.value);
});
setColor('#2563eb');
})();AIプロンプト
Basic
カラーピッカーをHTML/CSS/JSで作ってください。プリセットカラーの選択とHEX値の入力ができます。
Custom
以下の仕様でカラーピッカーを実装してください。 - プリセットカラー（10色程度のスウォッチ） - HEX値の直接入力 - プライマリカラー: #2563eb - ネイティブのcolor inputとの連携 - リアルタイムプレビュー - 選択中のスウォッチにボーダーハイライト - RGB / HSL / HEX の表示切り替え
Advanced
アクセシビリティ対応のカラーピッカーを実装してください。 - role="radiogroup" / role="radio" によるスウォッチのセマンティクス - 各色に aria-label（色名 + HEX値） - キーボード操作（矢印キーでスウォッチ移動、Enterで選択） - 高コントラストモード対応 - スクリーンリーダーで色名と値を読み上げ - カラーコントラスト比の表示（WCAG AA/AAA判定） - コピーボタンでHEX値をクリップボードにコピー - 最近使った色の履歴保存