カラーパレット
ベースカラーを拡張して知覚的に均一なランプを生成し、それらを組み合わせてパレットを構成します。すべての計算はバンドルされたジェネレーターに委譲し、このスキルの判断は設定と検証にあります。
原理（なぜOKLCHか）
- HSL/RGBでランプを生成してはいけません。 HSLの明度は嘘をつきます（同じ値≠同じ知覚明度）。また、ティントやシェードを適用すると色相がずれます。同じHSL明度でも黄色は明るすぎ、青は暗すぎて見えます。
- OKLCHは作業空間として優れています：L（明度）、C（クロマ）、H（色相）— 同じ数値は同じに見え、ネイティブCSSでも使用可能です。
- クロマはステップごとにガマットクランプする必要があります。 非常に明るい/暗いステップでは高いクロマは物理的に不可能です。ジェネレーターはブラウザにクリッピングさせるのではなく、クロマを減らします。
- 1つのコントラストアンカー: 白色テキストはL ≈ 0.55以下からWCAG AAをパスし、黒色テキストはL ≈ 0.60以上からパスします。中間ステップはこれらのターゲットの周囲に配置されます。
完全な理論と出典: references/theory.md
ワークフロー
1. 目標を明確にする
ユーザーと確認します（既に分かっていることはスキップ）：ベースカラーやブランドカラー、ステップ数（11が標準、9は控えめ、Radixスタイルのロールが必要な場合は12）、パレットに必要な色相（ブランド＋セマンティック：成功/警告/危険/情報＋ニュートラル）、ダークモードの有無。
2. ランプを生成する
cd "{skill_dir}/scripts" && python3 generate_ramp.py "#3b82f6" --steps 11 --chroma 90
# 複数色相パレット：1回の呼び出しで、カンマ区切りの名前
python3 generate_ramp.py "#3b82f6" "#e11d48" "#22c55e" --names blue,red,green --format css
主要なフラグ: --chroma N（各ステップのガマット最大値に対するクロマの割合。80〜95が標準、高いほど鮮やか）、--hue-drift D（明→暗で意図的に色相を変化させる。例：暗い黄色をオレンジに近づける。リクエストがあった場合のみ）、--cvd（デュータン（第二色盲）シミュレーションの16進数値）、--format table|css|json
複数色相ルール: すべての色相を1回の呼び出しで生成し、各ステップで同じLとクロマ割合を共有させます。これにより、blue-500 と red-500 が兄弟のように感じられるようになります。決して異なる範囲で1つの色相を再生成してはいけません。
3. 検証する
表形式の出力を読み、以下を確認します。
- 明度が単調増加し、隣接ステップ間のΔEがほぼ一定（均一度カラム）
- 意図したfg/bgステップペアがWCAG AAをパスしている（白色テキストには
vs-white ≥ 4.5のステップが必要。黒色テキストにはvs-black ≥ 4.5のステップが必要） - 色相間のΔE警告がない（同じステップの異なる色相間でOklab色差ΔE ≥ 0.05）
-
--cvdを使用した場合：デュータンシミュレート後のステップ色が、意味を持つUIに使用されるステップでまだ識別可能であること
ユーザーが既存のパレットを監査用に提供した場合、各ステップをOKLCHに変換し（--format json で再構築するか、手動で変換）、同じ4つのポイントを確認します。
4. パレットを構成する
- ステップにロールを割り当てます（Radix規約）：1-2 アプリ背景 · 3-5 コンポーネント背景（通常/ホバー/アクティブ） · 6-8 ボーダー/フォーカス · 9-10 ソリッド背景とホバー（ステップ9が最も純粋でクロマが高い） · 11-12 テキスト（低/高コントラスト）。
- セマンティックにエイリアスを付けます: スケールが1つの意味を提供する場合、
--red-500ではなく--danger-500とします。1つのスケールが複数のエイリアスをバックアップできます。 - ダークモード＝リマップ、再生成しない: スケールはそのままに、セマンティック割り当てを反転させます（最も明るいステップが最も暗いサーフェスに、テキスト色は両端が入れ替わります）。OKLCHでの知覚的な均一性により、逆マッピングでも同様に読みやすくなります。
5. 成果を納品する
--format css の出力をファイルに書き出します（@supports 内に16進数フォールバック付きのカスタムプロパティ）。さらに、検証レポートをチャットに出力します。デザインシステムが対象であれば、トークン命名（プリミティブスケール＋セマンティックエイリアス層）を提案します。
よくある修正
| 症状 | 修正方法 |
|---|---|
| 50/100ステップが薄く見える | 想定内 — 白色付近ではクロマが物理的に制限されます。「修正」するためにクランプしないでください |
| 色相の鮮やかさが不均一に見える | すべての色相を同じ呼び出しで生成してください。--chroma 80 を試してください |
| 500ステップが白色テキストのコントラストを満たさない | 大きなテキストやグラフィックであれば許容するか、中間明度を調整します（--hue-drift は役に立ちません。アンカーを移動してください） |
| 暗い黄色がオリーブ色に見える | 意図的に --hue-drift 10-15 でオレンジに近づけるか、ブランドの好みとして受け入れます |