使い方

PrimaryをHEXコードまたはカラーピッカーで指定し、「パレットを生成」を押すと、Munsell色彩理論に基づいた調和の取れた4色パレットが生成されます。右パネルに各色を適用したサンプルUIが表示され、WCAGコントラスト比のPass/Failを確認できます。

🎨 生成される4色

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

🎛️ 微調整スライダー

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

📐 配色ロジック

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

🎯 活用例

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

⚠️ 注意事項

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