直接の回答
カラートークンジェネレーターは、レビュー済みのカラーシステムを CSS カスタムプロパティ、Tailwind CSS v4 @theme、DTCG JSON にシリアライズし、実装とプレビューの完全一致を実現します。
このツールの使い方
1
トークンステージを開く
トークンジェネレーターのページを開くか、チェッカーから現在のカラーシステムを引き継ぎます。
2
成果物フォーマットを選択
CSS カスタムプロパティ、Tailwind v4 @theme、または DTCG JSON を選択します。各形式は確認済みトークンを忠実に反映します。
3
コピーまたはダウンロード
クリップボードへコピーするか、ファイルをローカルへ保存します。広色域カラーには決定論的 sRGB フォールバックが含まれます。
忠実なアーティファクト出力と広色域対応
エクスポートされたトークンは、画面上で確認された primitive スケール、セマンティックエイリアス、テーマモードを正確に表現します。最新の広色域カラーには視覚的破綻を防ぐ知覚的 sRGB フォールバックが自動付与されます。
- CSS、Tailwind @theme、DTCG の各出力は常に同一のドキュメントリビジョンに整合します。
- 外部サーバーへのトークン保存やアカウント登録は一切不要です。
- ブラウザのクリップボード権限がない場合でも、ファイルダウンロード機能で安全に作業を完結できます。
具体例
Primary スケールを Tailwind @theme 形式で出力
入力: レビュー済みの Primary 50–950 + 意味役割 primary/on-primary
出力: @theme { --color-primary-500: oklch(...); --color-primary: var(--color-primary-500); }
手動入力のミスを防ぎ、プロジェクトへ即座に導入可能なテーマ変数を生成します。
制限事項
- 外部のデザインツールへ直接プッシュする機能はありません。ローカルでコピーまたは保存してご利用ください。
- ベンダー固有の独自拡張を利用している場合は、DTCG エイリアスを自社ツールチェーンに合わせてマッピングしてください。
よくある質問
エクスポート内容はチェッカーで確認した値と一致しますか？
はい。プレビューに表示されているドキュメントと全く同じデータから生成されるため、意図しない値のズレは生じません。
生成されたトークンがどこかにアップロードされますか？
いいえ。シリアライズ、クリップボード書き込み、ファイル保存はすべて端末ローカルで実行されます。
ビルダーに戻って編集した場合、エクスポートデータはどうなりますか？
ステージを切り替えてもシステムドキュメントは保持されます。編集後にトークン画面に戻ると、最新リビジョンで再生成されます。
信頼できる参考文献・標準規格
- W3C CSS Color Module Level 4 ↗ — Modern color functions serialized into CSS custom properties with sRGB fallbacks.
- W3C Relative Luminance Definition & Formula ↗ — Luminance guidance for documenting accessible token pairs in exported artifacts.