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