サイト配色方案 — 貼れるセマンティック CSS トークン
ブラウザだけでサイト配色方案を生成します。手順：ブランド HEX（サンプルのティール #0F6E8C）を選び、共有ニュートラル、action/hover/soft/focus、中立リンク、固定ステータス色、UI プレビュー、AA 自己チェックを確認し、:root CSS か JSON をコピー。開くと例が自動表示。ルールベースでクラウド AI ではなく、色はアップロードしません。
ニュートラルとステータス色は共有。各テーマはブランド派生トークンだけを上書き。最大4テーマ。
| トークン | 値 |
|---|
| トークン | 値 | 役割 |
|---|
使い方
ブランドテーマを最大4つ（id + HEX）入力します。共有ニュートラル階段を保ち、各ブランドからアクション系トークンを導き、セマンティック役割（中立リンクと固定ステータスを含む）を割り当て、ライトな chrome を描き、AA 自己チェックを走らせ、CSS 変数か JSON をコピーできます——すべてローカルです。
想定されるルール
トークン階層、リンクとアクションの分離、ステータス独立、コントラストの目安、プライバシー。
- プリミティブは生のニュートラルとブランド派生を持ちます。セマンティクスは用途名（bg, surface, link, action…）。コンポーネントはセマンティクスだけを参照してください。
- ブランド → --action。hover は約22%暗く、soft ≈ 透明度10%、focus-ring ≈ 透明度40%、--bg はごく薄い色付きニュートラルです。
- リンクは text / text-strong（中立）へ。既定の --link を --action に結びつけないでください。
- danger / success / warning / info はテーマ横断で固定し、ブランドがエラー意味を置き換えないようにします。
- プライバシー：生成・プレビュー・クリップボードコピーはこのタブ内。ブランド色はアップロードしません。
例
サンプルを読み込みます（テーマ id teal、#0F6E8C）。プレビューは白サーフェス、選択中サイドバーのティール薄い背景（左の色棒なし）、中立本文リンク、赤の danger 行です。セマンティクスは --link をテキスト色に割り当て（--action ではありません）。CSS コピーで :root のニュートラルと html[data-theme="teal"] の上書きが得られます。
利用シーン
- ツールサイトや SaaS の chrome：読みやすいライト骨格に、選択とフォーカスだけブランドアクセント。全リンクを染めません。
- ランディングのリブランディング：html[data-theme] でブランドを差し替え、ニュートラル骨格とステータス色はそのまま。
- デザイン→開発の受け渡し：スクショの HEX 一覧ではなく :root CSS 変数を貼る。
Frequently asked questions
「スマート」は AI 配色と同じですか？
ここでの「スマート」は決定的なルールです。ニュートラルは固定、ブランドから action/hover/soft/focus を導き、リンクは中立、ステータス色はブランドに追従しません。モデル呼び出しもアップロードもなく、計算はこのタブ内です。
なぜリンクはブランド色ではないのですか？
既定リンクはテキスト色を使い、ページ全体がブランド色のリンク壁にならないようにします。ブランド色はアクション・選択・フォーカスリング・薄い soft 塗りに残します。
ステータス色がテーマで変わらない理由は？
danger / success / warning / info はテーマをまたいで固定です。琥珀色のブランドがエラー色になると、UI 全体が警報に見えてしまいます。
ブランド色スケール生成はいつ使う？
50–950 のランプや HEX/HSL/OKLCH 一覧が要るときは「ブランド色スケールを生成」を使ってください。このページは貼れるライトサイトのセマンティック方案（bg/surface/link/action/status）向けです。
コントラスト自己チェックの範囲は？
自己チェックはアクティブテーマの主要ペア数組です。任意の前景/背景や AAA は WCAG コントラストチェッカーにトークン HEX を貼って確認してください。
Related tools
お問い合わせ・フィードバック
分かりにくい点、不具合、不足があれば下にメッセージを書いてください。ツールに関する内容はすべて確認します。