カラーパレットジェネレーター｜WCAGコントラスト比を表示

使い方

Primaryをカラーコードまたはカラーピッカーで指定し、「パレットを生成」（またはEnterキー）を押すと、Munsell色彩理論に基づいた調和の取れた4色パレットが生成されます。右パネルに各色を適用したサンプルUIが表示され、Background・Primary・Secondary・Tertiary・Accent の5色すべての組み合わせ（10通り）について、WCAGコントラスト比のPass/Failを確認できます。

⌨️ カラーコードの入力

• 対応形式： HEX（#314B91 / #39F）、RGB（rgb(49, 75, 145)）、HSL（hsl(224, 49%, 38%)）。カンマ区切り・スペース区切りどちらも可
• 各色の直接指定： 生成後の4色それぞれの入力欄にコードを入れてEnterを押すと、その色に差し替わり、スライダーとプレビューにも反映されます
• アルファ値： rgba() / hsla() / 8桁HEXも入力できますが、アルファ値は無視して不透明の色として扱います（透過色はコントラスト比が背景次第で変わるため）

🎨 生成される4色

• Primary： 入力した基準色。主要要素の塗りに
• Secondary： Primaryより明るめ・彩度低め。背景や薄い装飾に
• Tertiary： Primaryより暗め・彩度高め。見出しや強調に
• Accent： 補色（色相+180°）。CTAやマーカーに

🎛️ 微調整スライダー

• Hue（色相）： 0〜360°で色相を調整
• Saturation（彩度）： 0〜100%で鮮やかさを調整
• Lightness（明度）： 0〜100%で明るさを調整

📐 配色ロジック

• Munsell理論： 「暗い色は彩度高く、明るい色は彩度低く」の反比例カーブ。色立体は均等な球形ではなく、自然な配色は彩度と明度が連動します
• 補色： Hueを+180°シフトしてAccentカラーを生成
• WCAG： 相対輝度ベースのコントラスト比を計算。Background と4色の計5色について、全10通りの組み合わせで AA（4.5以上）/ AAA（7以上）の判定を表示

🎯 活用例

• Webサイトの配色決定： ブランドカラーを入れて、調和のとれたパレットを即時生成
• グラフ・チャートの色選び： 不動産ダッシュボード等で、青いグラフに対する目立つマーカー色を提案
• アクセシビリティチェック： 配色を決めながら同時にWCAG合格判定を確認

⚠️ 注意事項

• ブラウザ処理： すべての処理はブラウザ内で完結します（サーバー送信なし）
• HSL基準： 簡易実装のためHSL色空間ベースです。OKLCHやHCTのような知覚均等色空間ではありません
• 補色のみ対応： 分割補色・三色配色・類似色は今後のアップデートで対応予定