直接の回答
カラーシステムビルダーは、変更不可のブランドカラーから 50–950 の primitive スケールと編集可能なライト/ダーク意味役割をブラウザローカルで生成します。
このツールの使い方
ソースカラーを入力
HEX、oklch()、color(display-p3 …) などの値を入力し、Primary や Neutral などのファミリーにアンカー（400/500/600）として割り当てます。
プロジェクトを作成
固定されたアンカーの値を維持しながら、必須の Primary/Neutral スケール、ステータススケール、ライト/ダークの初期マッピングを生成します。
調整とプレビュー
各ステップやセマンティックマッピングを微調整し、ライト/ダーク両モードでボタン、カード、フォームなどのコンポーネント表示を確認します。
固定アンカーとセマンティック階層の設計
ソースカラーは指定ステップの厳密なアンカーとして保持されます。primitive スケールは各色相ごとに 50 から 950 までの段階を持ちます。セマンティックロール（背景、サーフェス、テキスト、プライマリ、反転テキスト、ボーダー、フォーカスなど）はライトとダークの各テーマから別個に primitive を参照し、実装の意味と素のパレットを分離します。
- 未解決の var() や相対色構文、color-mix() 入力は明確なエラーとともに拒否されます。
- Primary と Neutral スケールは必須、Secondary と Accent は任意、Success・Warning・Destructive は常に自動生成されます。
- すべての解析と色生成はブラウザのメモリ内で完結し、自動保存されます。サーバー通信やアカウント登録は不要です。
具体例
ブランドブルー Primary システム
入力: ソース入力: #2563eb を Primary @ 500 アンカーに設定
出力: Primary 50–950 スケール + ライト/ダーク意味役割（primary、on-primary、focus）チェッカー準備完了
1 つのブランドカラーから完全な引き継ぎ仕様を生成し、不要な単機能変換ツールを使い分ける手間を省きます。
制限事項
- 未解決の CSS 変数や color-mix() の自動推論は行いません。具象的な CSS Color 4 の値を指定してください。
- 美しいスケールに関する助言はヒューリスティックな参考指標であり、法的アクセシビリティの適合認証ではありません。
よくある質問
エクスポートせずに直接チェッカーに進めますか？
はい。共通のツールアイランドがメモリ上に単一のカラーシステムを保持しているため、画面遷移や再インポートなしでステージを切り替えられます。
ブランドカラーが外部サーバーに送信されることはありますか？
一切ありません。すべてのカラー、スケール、プロジェクトデータはお使いのブラウザのメモリと LocalStorage 内でのみ処理されます。
キーボードでのステージ移動はどのように行いますか？
ステージタブを用いてビルダー、チェッカー、トークン生成の間を移動できます。フォーカス表示は明瞭に保たれ、ステージ移動で正規 URL が変わることはありません。
信頼できる参考文献・標準規格
- W3C CSS Color Module Level 4 ↗ — Authoritative syntax for HEX, rgb(), hsl(), oklch(), and color(display-p3 …).
- W3C Web Content Accessibility Guidelines (WCAG) 2.2 ↗ — Accessibility baseline referenced when Builder previews contrast-sensitive semantic roles.