使い方
- まず、役割色が プロダクト・文書・マーケティング のどれかとして大きくは崩れていない状態まで整えます。
- 次に コンポーネントプリセットを選び、ボタン・カード・入力欄・ナビ・バッジのような エイリアス名を先に確認します。
- エイリアス層が自然なら、CSS変数やJSONをデザインシステム や仕様書へそのまま渡します。
便利ツール
セマンティック や ロール から コンポーネントエイリアス へ進む
このページは「色の役割はだいたい見えた」の次に置きます。答えたい問いは 1 つだけで、その役割色を ボタン・カード・入力欄 のような コンポーネント 名でどう渡すかです。
ライトの エイリアス
ダークの エイリアス
CSS変数
JSON
近いページとの使い分け
アクセシブル配色パレット は 役割色を組む段階です。セマンティック カラートークン は、その ロールにセマンティック名を付ける段階です。カラートークンプレビュー や カラートークン監査 は見た目確認や整合性点検の段階です。状態 カラートークン は コンポーネントエイリアス が固まったあとで ホバー・アクティブ・フォーカス・無効・選択中 を名付ける段階です。カラートークン出力 は ロール バンドルのまま 引き渡しする段階です。このページは、その途中で ボタン・カード・入力欄・ナビ・バッジのような コンポーネントエイリアス名が必要なときに使います。
FAQ
このページで何が作れますか？
採用済みの役割色を、ボタン・カード・入力欄・ナビ・バッジ・記事ブロックなどの コンポーネントエイリアス へ落とし、CSS変数とJSONを出力できます。
セマンティック カラートークンとの違いは何ですか？
セマンティック カラートークンは 役割色に名前を付ける段階です。このページは、その名前づけ済みの色を ボタンやカード などの コンポーネントエイリアス へ落とす段階です。
カラートークン出力との違いは何ですか？
カラートークン出力は ロールベースのバンドルをそのまま 引き渡しする段階です。このページは、その前に コンポーネントごとの エイリアス名が必要なときに使います。
共有URLには何が入りますか？
基準色、接頭辞、AA/AAA 目標、コンポーネントプリセット、ダークエイリアスを含めるかどうかが入ります。