visualife/color-palette-designer

カラーパレットデザイナー

見た目が良く、かつコントラストもパスする色は、1つのプロセスから生まれます。ムードに合わせて色相を選び、数学で明度を固定することです。ハーモニーホイール、60-30-10の法則、カラー心理学のチャートは、ユーザビリティの根拠がない出発点のヒューリスティックに過ぎません。コントラスト、抑制（1つのアクション色相）、そして周囲から際立つアクセントこそが、実際に機能する要素です。それらのために構築しましょう。

すべての数値は scripts/palette.mjs（依存関係なしのNode.js）から生成されます。比率やOKLCH値を手計算で見積もるのではなく、このスクリプトを使用してください。手計算によるコントラストは、十分な頻度で誤差が生じます（このスキルの基となった調査では、いくつかの値が0.05から0.15ずれていました）。

S=<skill-dir>/scripts/palette.mjs
node $S contrast '#767676' '#ffffff'        # 4.54:1, グレード, APCA Lc
node $S oklch '#3F6B4E'                     # 正確なOKLCH
node $S solve '#C0643F' '#FFFFFF' 4.5 darker   # パスするまでLのみ調整
node $S ramp 155 0.12                       # 50-950 OKLCHランプ
node $S generate --hue 155 --chroma 0.07 --neutral-hue 95 --accent-offset -110 --format report
node $S generate ... --format css           # 他: css-light-dark | json | dtcg
node $S audit sage-wellness                 # キュレーションされたパレットID、または任意のroles.json
node $S presets                             # area-split と state-mix のプリセット
node $S ratio 70 25 5 --preset calm         # エリア分割の検証（可視領域のパーセンテージ）
node $S states sage-wellness --css          # 解決済みのhover/active/disabled/tint ミックス + チェック
node $S dark midnight-terminal              # ダークモードルール D1-D11（--light <id|file>, --oled を追加）
node $S cvd '#0072B2' '#D55E00' '#009E73'   # 色覚障害による分離

audit、generate、dark、states、ratio は、失敗ペアまたはFAILルールがある場合に非ゼロで終了します。そのため、ユーザーに何かを表示する前のゲートとして使用してください。ダークモードの場合、generate と audit は自動的にダークルールを実行します。

ワークフロー: ブリーフから検証済みパレットへ

1. ブリーフを解析する。 ブランドカラー、ムードワード、業界、オーディエンス（年齢、視覚特性）、モード（ライト、ダーク、または両方）、適合レベル（デフォルトはAA。ヘルスケア、政府、高齢者向けオーディエンスではAAA本文テキスト）。ユーザーが雰囲気だけを伝えた場合は、以下の判断表から色相を選び、前提を1行で述べて、質問し返さないでください。
2. 戦略を選ぶ。 デフォルトは、薄く着色されたニュートラル + 1つのプライマリ（+ オプションで1つのアクセント）。モノクロームにセマンティックカラーを加えるのが最も安全です。コントラスト効果（孤立効果）を得るためだけに補色を使用してください。三色または四色配色は、チャートやイラストには適していますが、UIのクロームにはほとんど適しません。
3. アンカーとなる色相とクロマを決める。 ブランドの16進数カラーコードがある場合は、oklch を実行してその色相を維持します。アーシー/ウェルネス系はクロマを約0.12に、ビビッド/テック系は0.20-0.26に制限します。ブランドカラーがない場合は、そのカテゴリの明らかな競合他社とは異なる色相を選びます。
4. 生成する。 generate は各モードのニュートラル、プライマリ、アクセント、セマンティックロールを構築し、コントラスト目標が達成されるように明度を解決します。手動でパレットを構築する場合は、ramp でランプを構築し、ステップをロールにマッピングします（以下の表参照）。
5. すべてのペアを検証する audit を使用して。失敗した場合は、明度のみを変更（solve を使用）し、色相は決して変更しないでください。色がsRGBから外れる場合はクロマを減らします。キュレーションされた15のパレットにおけるすべての失敗は、中明度・高クロマのアクセント（OKLCH L 約0.60-0.77）によるものでした。白テキストには明るすぎ、暗いテキストには暗すぎ、3:1には白に近すぎる。修正: L <= 0.55 に暗くして白テキストを使用、L >= 0.72 に明るくして暗いテキストを使用、または装飾的にして枠線を付ける。
6. 色覚障害チェック cvd を使用して。プライマリ、成功、エラーが（いずれかのシミュレーション下で dE_OK < 0.10 で）つぶれる場合は、明度で分離し、アイコンとラベルを要求します。色相だけでは意味を伝えられないためです（WCAG 1.4.1）。
7. APCAは参考情報です。 WCAG 3はまだコントラストアルゴリズムを採用していません（2026年9月のワーキングドラフトでは未定とされています）。そのため、WCAG 2.2が合格/不合格を決定します。APCA Lcは警告として報告します。本文テキストで |Lc| 75未満は細く（ダークモードでよくある）、15未満は見えません。
8. ステートは手動ではなく states で定義する。 ホバーとアクティブのパーセンテージはパレットに依存します。フラットなプリセットパーセンテージでは、測定した45のパレット/プリセットの組み合わせのうち37で少なくとも1つのステートステップがdL 0.03未満（ほとんど見えない）になり、ホバーステップだけでも26で同様でした。node $S states <palette> --preset standard --css は、ミックスのパーセンテージと方向（テキスト/背景のうち、オン-プライマリの可読性を維持する方）を解決し、すべてのステートのコントラストをチェックし、color-mix(in oklab, ...) 変数を出力します。generate --format css --states standard はすべてのモードにそれらを追加します。無効（Disabled）: 背景に向けてミックスし、非色覚的なキューを追加。フォーカス: 2pxのリング、オフセット2px、背景に対して >= 3:1。選択（Selected）と訪問済み（Visited）には非色覚的なキューが必要です。
9. 比率を選ぶ（以下の「パーセンテージルール」を参照）、納品ノートにプリセットを記載します。
10. 出力する：ロールテーブル（16進数 + 正確なOKLCH）、合格/不合格テーブル、CSSカスタムプロパティ、およびオプションでTailwind v4 @theme または DTCG JSON。根拠は慣習または証拠としてラベル付けし（references/evidence-and-conventions.md 参照）、生成されたコピーがカラー心理学の民間伝承を繰り返さないようにします。
11. 表示する。 デモページ（後述）を提供または構築し、ユーザーがスウォッチグリッドではなく実際のレイアウトでパレットを評価できるようにします。

ロール契約

すべてのパレットは、サポートされるすべてのモードに対してこれらのロールを定義します。コンポーネントはロールを消費し、生の16進数は使用しません。

ロール	目的	最小要件
bg, surface, surface-2	キャンバス、カード、浮き上がったパネル	識別可能（OKLCH dL >= ~0.03）
border	装飾的な区切り線	なし
border-strong	入力フィールドの輪郭、コントロール	背景に対して3:1（SC 1.4.11）
text	本文	背景とサーフェスに対して4.5:1（目標7+）
text-muted	二次テキスト	背景とサーフェスに対して4.5:1
primary / on-primary	メインアクションの塗り/その上のテキスト	塗り: 背景に対して3:1、リンクテキスト: 4.5:1。塗り上のテキスト: 4.5:1
accent / on-accent	オプションの第二色相	意味を持つ場合はプライマリと同じ
success warning error info	ステータステキストとアイコン	背景に対して4.5:1。色のみに依存しないこと
focus-ring	キーボードフォーカス	隣接色に対して3:1

ランプからロールへのマッピング（50-950スケール）: ライトモード: bg 50 または白、surface 白/50、surface-2 100、border 200、border-strong 500、text 900-950、text-muted 600、primary 600-700、on-primary 白、focus primary-600。ダークモード: bg 950（または900）、surface 900、surface-2 800、border 800、border-strong 600、text 50-100、text-muted 400、primary 300-400、on-primary 950、focus primary-300。このマッピングは最初の推測として扱い、audit に判断させてください。

ハードルール（WCAG 2.2 AA、AAAが要求された場合はAAA）

• テキスト 4.5:1。大テキスト（24px以上、または18.66px以上かつ太字）3:1。UIコンポーネントと意味のあるグラフィック 3:1（SC 1.4.11）。AAAはテキスト7:1、大テキスト4.5:1。
• 装飾的な枠線は薄くても構いませんが、フィールドの唯一の手がかりとなる入力フィールドの輪郭は3:1を満たす必要があります。1.3:1の「エレガントな」入力枠線は不合格です。
• 色だけで意味を伝えてはいけません。本文リンクには下線を引くか、周囲のテキストに対して3:1のコントラストとホバー/フォーカスの手がかりを与えてください。エラーにはアイコンとメッセージを付けてください。チャートシリーズには直接ラベルまたは形状を付けてください。
• 着色された背景は計算を変えます。白を基準に調整されたセマンティックカラーは、暖色系の紙の背景では約4.4:1に低下します。白ではなく、実際の背景で audit を実行してください。
• グラデーションや写真上のコントラストは、最も悪い箇所（最も明るい領域と最も暗い領域）で維持されるか、スクリムを追加する必要があります。

詳細、公式、色覚障害セーフセット（Okabe-Ito）、APCA閾値: references/accessibility.md。

OKLCHで作業する

• oklch(L C H) を信頼できる情報源として使用してください。L は知覚的な明度（0-1）であり、等しいLの色は実際に同じように明るく見えます。HSLでは、50%の黄色と50%の青は大きく異なります。OKLCHで色相を回転させると明度が維持されるため、ハーモニーオフセットがそこで機能し、HSLでは機能しません。
• ニュートラルにブランドの色相を非常に低いクロマで着色します。白に近いところでは約0.005-0.015、暗いところでは0.01-0.045。暖色系のニュートラル（色相60-100）はウェルネス、フード、エディトリアルに適しています。寒色系（240-270）はSaaS、ファイナンス、開発ツールに適しています。着色されたニュートラルの隣に、無彩色の純粋なグレーを置かないでください。
• ランプ目標値: ステップ50-950に対して L 0.985, 0.967, 0.928, 0.872, 0.707, 0.554, 0.446, 0.372, 0.279, 0.208, 0.129。クロマは両端で先細りになります。ガマットマッピングは、クリッピングではなくクロマを減らすことで行ってください。ブラウザはクリッピングを粗く行います。
• グラデーション: 灰色の濁った中間点を避けるために in oklab または in oklch で補間します。ゼロに近いクロマの全画面ダークグラデーション（バンディング）を避けるか、微妙なノイズを追加します。
• サポート状況（2026年後半）: oklch() は2023年からベースライン。color-mix() は2025年11月から広く利用可能。相対色構文は Chrome 122+、Firefox 128+、Safari 18+。light-dark() は2026年11月13日に広く利用可能になります。デフォルトの出力として、prefers-color-scheme と [data-theme] オーバーライドを備えたプレーンなカスタムプロパティを出力します。コンパクトな代替として light-dark() を提供します。相対色構文では l は0-1です。

判断表: ブリーフから戦略へ

ブリーフのシグナル	ニュートラル	プライマリ	アクセント	モード	目標
ウェルネス、オーガニック、スパ、紅茶	暖色系、H 70-100、C 0.008-0.02	セージ/モス/ティール、C 0.05-0.10、L ~0.50	類似色またはアーシーな補色（テラコッタ、クレイ）	ライト	AA、本文7:1推奨
Eコマース	ニュートラル/暖色系、C <= 0.01	ブランド色	他では使用しない孤立したCTA色相	ライト	AA
SaaS / B2B	寒色系、H 250-270、C 0.01-0.04	青/インディゴ/バイオレット	モノクローム + セマンティック	ライト + ダーク	AA
開発ツール	寒色系または純粋なグレー	青/バイオレット/緑、ダークL 0.70-0.80	モノクローム。シンタックスカラーはコード内のみ	ダーク優先 + ライト	AA、APCA確認
エージェンシー / ポートフォリオ	オフホワイトの紙またはニアブラック	黒/白	1つのエレクトリックアクセント。3:1に失敗する場合は枠線を併用	どちらか	AA
フィナンシャル	寒色系ネイビー	ネイビー/ブルー	増減を+/-と矢印で表示	ライト（+ ダーク）	AA、数値はAAA
ヘルスケア	寒色系ニュートラル	ティール/ブルー	落ち着いた緑	ライト	AAA本文
子供向け / クリエイター	暖色系クリーム	鮮やかなバイオレット/ブルー	三色配色、それぞれ面積10%以下	ライト	AA

出発点: references/palettes.md（CSS、OKLCH、合格/不合格テーブル付きの検証済み15パレット）。最も近いものを選択し、色相とクロマを適応させ、audit を再実行します。

パーセンテージルールとプリセット

エリア分割は面積の予算であり、法則ではありません。60-30-10はインテリアデザインの慣習であり、正確な数値にユーザビリティ研究の裏付けはありませんが、アクセントのシェアを小さく保つことで、ここで唯一研究で裏付けられた効果（CTAはその色相が希少な場合にのみ際立つ）を保護します。シェアは可視背景領域のパーセンテージです（テキストのインクはカウントしません）。分割を ratio でチェックし、実際のページを scripts/measure-area.js で測定します。推測はしないでください。

プリセット	分割 n-s-a	使用場面
classic	60-30-10	Eコマース、SaaSマーケティング、一般的なデフォルト
calm	70-25-5	ウェルネス、ヘルスケア、ファイナンス、エディトリアル
dense-app	80-17-3	ダッシュボード、管理画面、開発ツール（ライトまたはダーク）
product-first	80-15-5	写真が色を担うカタログ。1つの孤立したCTA色相
editorial	70-27-3	ブルータリスト/エディトリアル。枠線とインクが機能を果たす
dark-showcase	70-22-8	1つの鮮やかなアクセントを持つダークポートフォリオ/エージェンシー
bold-brand	50-30-20	クリエイター、キャンペーン、子供向け。アクセントが主導する場合もある

ルール: シェアは合計100（FAIL）。ニュートラルが最大シェアで、45以上。アクセントはプリセットの範囲内に収める（彩度の高いグラデーションやブランドオーバーレイはアクセントとしてカウント）。プライマリはアクセントエリアの70%以上を占め、1つのアクション色相が主導する。セマンティックカラーは通常時2%以下。ダークテーマはニュートラルを70%以上に保つ。ステートプリセット（subtle 8/14/50、standard 12/20/60、strong 16/26/70 をホバー/アクティブ/無効の最低パーセンテージとして、ティントは8/10/14）は、ステップが見えるようになるまで states によってパレットごとに引き上げられます。範囲、ルールA1-A7およびS1-S6、方向ロジック、測定スニペット: references/proportions-and-states.md。

ダークモード

ダークテーマは第二のパレットであり、決して反転ではありません。エンジンは測定可能なルール（node $S dark ...、generate と audit でも実行）を強制します。残りは手動で適用する実装ルールです。閾値と修正を含む完全なテーブル: references/dark-mode-rules.md。

測定されたルール（FAILはブロック。WARNは理由の説明が必要）:

• D1 bgは純粋な黒ではない: OKLCH L 0.13-0.24（宣言されたOLEDバリアントの場合のみ真の #000 を許可）。
• D2 テキストは純粋な白ではない: L 0.88-0.95。D3 テキスト/bg <= 17:1。
• D4 明度による浮き上がり: bg < surface < surface-2、ステップあたり約+0.04 L。影はダーク上で浮き上がらせない。
• D5 ニュートラルは着色され、bgのクロマは <= 0.045。
• D6 プライマリは、明るい塗り（L >= 0.70）で暗いオン-プライマリを持つか、深い塗り（L <= 0.58）で白いオン-プライマリを持つ。0.58-0.68の帯はデッドゾーンです。塗りはbgとsurfaceに対して3:1が必要。
• D7 ライトテーマに対して: 同じ色相（10度以内）、明るく、クロマは高くない（10-30%削減）。
• D8 ステータスカラーはダーク用に再調整: bgと浮き上がったサーフェス上で4.5:1、アイコンとテキストを伴う。
• D9 border-strong 3:1。装飾的な枠線は引き続き見える（dL >= 0.05）。D11 フォーカスリング 3:1。
• D10 APCA参考情報: テキスト |Lc| >= 75、muted >= 45（目標60）。ダーク極性は、WCAG 2で合格する細いテキストを露呈させる。

手動による対応: filter: invert は使用しない（N1）。ホバー時に暗くする代わりに明るくする（N3）。アルファテキストは使用しない（N4）。明るい写真を暗くし、ライト/モノクロのロゴバリアントを提供する（N5）。小さく細い書体を避ける（N6）。color-scheme とスキームごとの theme-color を設定する（N8）。OSに従い、3状態トグルでフラッシュを避ける（N9）。ダークサーフェス上でチャートの色を再チェックする（N10）。通常の視覚を持つほとんどのユーザーにとってライトモードの方が読みやすく、一部のロービジョンユーザーにはダークモードが役立つため、両方を提供します。参考ダークパレットとトークンアーキテクチャ: references/dark-mode-and-tokens.md。

注意すべきアンチパターン

3つ以上の彩度の高い色相をクロームで使用する。CTAの色相を見出し、アイコン、バッジに再利用する。等しいLの彩度の高い補色（エッジが振動する）。着色された背景上のグレーテキスト（調整されたLで背景の色相を使用）。4.5:1未満の薄いグレー/オフホワイトの「ミニマル」テキスト。白テキストと一緒に中Lのアクセントを使用する。代替のない outline: none。ごくわずかな色相シフトで異なるホバーとアクティブステート（Lを0.05-0.10変更）。有効に見える無効状態。同じ彩度の高いブランドカラーをダークモードで変更せずに再利用する。