カラー ピッカー
🎨 まずざっくり選んで、あとで微調整。色の知識ゼロでもOK
1. ざっくり選ぶ
2. 微調整する
Sample あいうえお
1234567890
1234567890
← 赤 / 黄 / 緑 / 水 / 青 / 紫 →
0% でグレー、100% で純色
0% で黒、100% で白
明度バリエーション (この色の濃淡)
彩度バリエーション (くすみ⇔鮮やか)
配色候補 (補色・類似色)
3. コピーして使う
コントラスト比 —
WCAG基準: AA 4.5+ / AAA 7+ (本文)
背景色 (BG)
HEX
RGB
HSL
CSS
文字色 (TEXT)
HEX
RGB
HSL
CSS
※ ステップ1のサンプルをクリック → ステップ2のトグルで「背景色」「文字色」を切替 → スライダーで微調整 → ステップ3でコピー。
※ HEX欄は 直接編集 も可 (例: #ff8800)。Enterで反映。
※ コントラスト比は背景色×文字色のWCAG式で算出。
4. 組み合わせを保存して比較
※ 各カードをクリックすると、その組み合わせがエディタに復元されます。
※ ホバー時の × で個別削除。
※ 保存はブラウザのlocalStorageに自動保存され、次回アクセス時にも復元されます。