CSSデザイントークンジェネレータ
1つのブランドカラーのHEX値から、完全な50-950 OKLCH色パレットと意味的なCSSカスタムプロパティ(プライマリ、サーフェス、ボーダー、リングなど)を生成します。暗いモードのバリアントオプション付き。
入力
色を選択するか、HEX値を直接入力してください。
パレットのキーとして使用されます。例：--color-brand-500
モダンはoklch()の値を出力します。Hexは従来の#rrggbbを出力します。
暗いモード対応の意味的トークン上書きの2番目のブロックを追加します。
パレットの彩度をスケーリングします。100はブランドカラーの色度を保持します。
出力
このツールを使う他の方法
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-design-token-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"brandColor": "#464aff",
"tokenName": "brand",
"colorFormat": "oklch",
"includeDarkMode": "true",
"darkSelector": ".dark",
"chromaBoost": "100"
}'ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。
AIエージェントに依頼する
Use the IOTools `css-design-token-generator` tool (CSS Design Token Generator) on this input:
YOUR_INPUT_HEREIOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。
埋め込みウィジェット
<iframe
src="https://iotools.cloud/embed/css-design-token-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSSデザイントークンジェネレータ — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>ご自身のページに貼り付けるだけ——無料、キー不要、リンクを掲載するだけです。
| API/MCP 1回あたりの費用 | 5クレジットから |
|---|---|
| クレジットが足りませんか? | 料金を見る |
次の方法でも利用可能
ガイド
デザイントークンとは？
デザイントークンは、色、スペーシング、半径、フォントサイズなどの名前付き再利用可能な値で、デザインシステムを構成しています。20個の異なるコンポーネントで#3b3ff0をハードコードする代わりに、--color-primaryを一度定義してどこでも参照します。トークンの値を変更すると、それを使用するすべてのコンポーネントが一緒に更新されます。トークンにより、デザインシステムが成長しても一貫性を保つことができ、単一のダークモード切り替えで製品全体を再描画することができます。
CSS カスタムプロパティが一般的なターゲット形式である理由
デザイントークンはJSON、JS/TSオブジェクト、Sassの変数など、多くの形式にエクスポートできますが、CSSカスタムプロパティ(--my-token: value;)には異なる利点があります。これはブラウザのネイティブであり、レンダリング時に解決され、自動的にカスケードしセレクタでオーバーライドします。これが通常のCSSでテーミングを可能にするもので、:rootの下で一度トークンを定義し、.dark(または@media (prefers-color-scheme: dark))の下でそれらのサブセットをオーバーライドし、var(--color-primary)を消費するすべてのコンポーネントがJavaScriptやリビルドなしで再描画されます。このツールはCSSカスタムプロパティを特に対象にしています。なぜなら、このカスケードとオーバーライドの動作が、色システムが必要とするものだからです。
このツールがパレットを構築する方法
単一のブランドHEX色から開始して、ツールはOKLCH（知覚的に均一な色空間）を通じて補間し、11段階のスケール(50から950)を生成します。これはTailwindのデフォルトパレットで使用されるのと同じ形状です。OKLCH明度ステップは知覚的に均一なため、各ステップは一定の明るさジャンプのように見え、生のRGBまたはHSLで補間する場合に得られる不均一なジャンプではありません。生成された各ステップもsRGB色域に固定されるため、高度に飽和したブランドカラーでも、常に有効で表示可能な色としてレンダリングされます。
生のパレットの上に、ツールは固定されたセマンティックロールのセット（--color-primary、--color-surface、--color-border、--color-ringなど）を特定のステップにマップします（例えば、ライトモード ではprimary→600、ダークモードでは400）。これらのセマンティック名は、コンポーネントが実際に参照するべきもので、生のスケール50–950は主にそれらをサポートするために存在します。
このツールの使い方
- ブランドカラーを選択します（またはHEX値を直接入力します）。
- トークン名を設定します（例：
--color-brand-500）。ブランドまたは製品に固有の名前を使用してください（例：acmeまたはindigo）。 - フォーマットを選択します：
oklch()は最新のワイドガモット対応、またはシンプルなhexは古いツールとの最大互換性。 - ダークモード変種を含めるをオンのままにして、2番目のセマンティック上書きブロックを取得し、フレームワークに一致するダークセレクタを選択してください。
.darkクラス（Tailwind、shadcn）、[data-theme="dark"]属性、またはOSレベルのテーミングのための@media (prefers-color-scheme: dark)クエリです。 - 色度を調整してパレットの彩度をスケーリングします。100はブランドカラーの元の強度を保ちます。値が低いほどおとなしく、彩度の低いパレットが作成され、値が高いほどその明度で表示可能な最も飽和した色に近づきます。
- 生成されたCSSをコピーするか、
.cssファイルとしてダウンロードし、スタイルシートにドロップします。
コントロールを調整すると、出力がリアルタイムで更新されます。
FAQ
パレットに生のステップ（--color-brand-600）と意味的トークン（--color-primary）の両方が含まれているのはなぜですか？
生のスケールは真実の根拠です。意味的トークンはその上のエイリアスレイヤーです。コンポーネントは意味的な名前（--color-primary、--color-border）を参照する必要があります。生のステップは直接参照しないため、パレットの再設計（またはブランドカラーの切り替え）はコンポーネントコードに触れることを必要としません。
色度スライダーは実際に何をしますか？ これは、各生成されたステップの彩度（色度）をブランドカラーの色度に対して相対的にスケーリングし、各ステップをsRGB色域に再固定します。100はブランドカラーの飽和度をできるだけ近く再現しますが、各明度ステップの色域により異なります。100以下の値はより落ち着いた、より彩度の低いパレットを生成します。100以上の値はその明度で表示可能な最も飽和した色に向かいます。
どのダークモードセレクタを選ぶべきですか？
フレームワーク（Tailwind、shadcn/ui、ほとんどのコンポーネントライブラリ）が<html>または<body>のクラスを切り替える場合は.darkを使用します。データ属性を切り替える場合は[data-theme="dark"]を使用します。オペレーティングシステムのテーマに自動的に従うページを希望する場合は@mediaクエリを使用します。切り替えはありません。
古いブラウザをサポートする必要がある場合、oklch()の値を使用できますか？
oklch()はすべての現在のメジャーブラウザでサポートされていますが、大幅に古いブラウザをサポートする必要がある場合は、フォーマットをHexに切り替えてください。同じパレットと意味的構造がどちらの方法でも生成されます。oklch()の代わりに#rrggbb値だけです。
プライバシー
すべてはブラウザで行われます。入力した色、トークン名、または設定はサーバーに送信されません。CSSはブラウザ内でローカルに生成および更新されます。