使い方
- 基準色、接頭辞、AA/AAA の目標を決めます。
- export 前に 1 回見た目を確認したいなら、先に カラートークンプレビュー を開きます。
- 重複ロール、近すぎる色、コントラスト不足を export 前に洗いたいなら、次に カラートークン監査 を使います。
- ダーク用も必要ならチェックを入れたままにし、不要なら外します。
- 必要な出力形式だけコピーして、CSS やトークン設計書へ貼ります。
Wave 54 拡張
役割色の設計から、コードへ渡す出力へ進む
このページは Accessible Color Palette の次に置きます。見る対象は 1 つだけで、決まりつつある配色をどうコードや仕様書へ渡すかです。
近いページとの使い分け
カラーパレット生成 や 配色ハーモニー は、配色そのものを探す段階向けです。アクセシブル配色パレット は役割色を組み立てる段階、カラートークンプレビュー はその役割色を export 前に UI ブロックへ当てて確認する段階、カラートークン監査 はその配色に重複ロール・近すぎる色・コントラスト不足が残っていないかを export 前に洗う段階です。カラートークン差分 は、その変更後セットが現行セットとどう違うかを見る段階です。role 色は固まったが semantic token 名がまだ曖昧なら semantic カラートークン を使います。button・card・input・nav・badge などの alias まで必要なら component カラートークン を経由してから export へ進みます。CSS color-mix 生成 は 1 つの混色式を作る段階、OKLCH 変換 は 1 色を知覚色空間で確認する段階です。このページは、役割つきの配色セットをコードや仕様書へまとめて渡したいときに使います。
FAQ
このページでは何を出力できますか？
採用済みの基準色 1 色から、ライトと任意のダーク配色を CSS 変数、JSON トークン、ユーティリティ用マップとして出力できます。
アクセシブル配色パレットとの違いは何ですか？
アクセシブル配色パレットは、役割色そのものを組み立てるページです。このページは、配色がある程度固まったあとにコードや仕様書へ渡す形式へまとめるページです。
CSS color-mix や OKLCH 変換との違いは何ですか？
CSS color-mix は 2 色から 1 つの混色式を作るページ、OKLCH 変換は 1 色を知覚色空間で見るページです。このページは、役割つきの配色セットをまとめて handoff したいときに使います。
共有URLには何が入りますか？
基準色、接頭辞、AA/AAA 目標、ダークトークンを含めるかどうかが入ります。