使い方
色を入れてから、判断して、持ち出すまで。実際の画面で追えるようにまとめました。
STEPS — 3
30秒で始める
色を入れる
画面下のパレットバーの ＋ から色を追加します。HEX を貼っても、色相・彩度・明度のスライダーで作っても構いません。共有リンク（#p=…）を開いた場合は、その配色がそのまま復元されます。
単位と観点を選ぶ
「単位」は一度に見る色の数（単色 / ペア / パレット）、「観点」は目的（検証＝いまの配色を診断する / 設計＝配色をつくる）。この2つの組み合わせで表示されるカードが決まります。ペア×検証では、スウォッチの FG / BG バッジで文字色と背景色を指定します。
結果を持ち出す
デザイントークン（CSS 変数 / Tailwind / JSON）としてコピー、リンクとして共有、AI に渡す Markdown として書き出す。パレットは自動で URL に入るので、保存操作は要りません。
モードと表示されるカード
カードはモードごとに決まっています。目的のカードが見当たらないときは、単位か観点を切り替えてください。
- 単色 × 検証
- 色値 · HSV（色相・彩度・明度） · 相対輝度 · 拡張色空間 · 知覚明度・色温度 · 不透明度 · 色相環 · ガマット・出力適合
- ペア × 検証
- WCAG コントラスト比 · 色差 ΔE · 色覚シミュレーション · APCA コントラスト · 色差の内訳
- パレット × 検証
- パレット概要 · コントラスト比マトリクス · 色差 ΔE マトリクス · 色相分布 · 明度・彩度分布 · 暖寒バランス · グレースケール耐性 · 色覚識別性 · 冗長性検出 · 役割カバレッジ · 調和スキーム判定 · UI モックプレビュー · SVG プレビュー · データビズプレビュー
- 設計
- 調和スキーム生成 · トーン展開 · 色相シフト · 明度・彩度バリエーション · 2色間グラデーション · アクセシブル化ナッジ · 色のミックス · 色覚セーフ提案 · 不足色の補完提案 · ダーク/ライト変換 · 並べ替え・正規化 · セマンティックロール割当 · 色名検索 · 配色テンプレート · デザイントークン出力
カード見出しの3つのボタン
どのカードにも、指標を掘り下げるための同じ3つの入口があります（該当する内容が無いカードでは表示されません）。
- ? — 指標の説明
- その指標が何を測っているか、どの値が目安かを短く読めます。
- 本 — 参考資料と書籍
- 一次情報へのリンクと、その指標を扱う蔵書。腰を据えて学ぶときの入口です。
- ⟨/⟩ — 実装例
- いま表示中の色を埋めたコードをコピーできます。期待値のコメントは画面の数値と同じ計算から生成しています。
結果の持ち出し方
- デザイントークン
- 設計ビューの最後にあるカードから、CSS 変数・Tailwind の @theme・JSON の3形式でコピーできます。色名は役割（background / text / primary / accent / neutral）が割り当てられます。
- 共有リンク
- パレットは URL ハッシュ（#p=…）に同期されます。パレットバーの「リンク」でコピーでき、開いた相手には同じ配色が再現されます。色はサーバーに送られません。
- AI に渡す
- 「AI」ボタンで、コントラスト比・APCA・ΔE・危険なペアをまとめた Markdown をコピーします。エディタの AI に貼れば、そのまま修正指示として使えます。
覚えておくと速い
- スウォッチはクリックで選択、ダブルクリックで編集、← → で並べ替え。右下の塗りつぶしアイコンでアプリ自身の差し色（UI アクセント）に指定できます。
- カラーコードの表示形式（HEX / RGB / HSL / HSV）はヘッダーで切り替わり、アプリ全体に効きます。コードはクリックでコピーできます。
- テーマ（ライト / ダーク）と言語（日本語 / English）は設定メニュー。次回訪問時も保持されます。
- インストール（PWA）すればオフラインでも起動します。計算はすべてブラウザ内で完結します。