CSS変数ジェネレーター

CSS変数ジェネレーターは、CSSカスタムプロパティ（CSS変数）を使用して 完全なカラーテーマシステムを設計するための無料ブラウザベースツールです。 シェードのバリエーションを手動で計算し、繰り返しの:root宣言を書く代わりに、 このツールがベースカラーの定義からセマンティックトークンのマッピング、 ダークモードバリアントの生成まで、ワークフロー全体を自動化します。

まず、ビジュアルカラーピッカーまたは16進数入力で名前付きカラーを追加します。 ツールはHSLの明度操作を使用して、各ベースカラーに対して11段階のシェード バリエーション（50〜950）を自動生成します。これはTailwind CSSや Material Designがカラースケールを構築する方法と同様です。 次に、background、surface、text、primary、success、 errorなどのセマンティックロールにカラーを割り当て、コンポーネントの スタイルを特定のカラー値から切り離すデザイントークンレイヤーを作成します。

3つの変数命名規則をサポートしています：kebab-case （--primary-500）、BEM-style（--color-primary--500）、 Tailwind-style（--color-primary-500）。プロジェクトの規約に 合ったものを選択してください。生成される出力は、スタイルシートに 貼り付けるだけのクリーンなCSS :root {}ブロックです。

ダークモードサポートが組み込まれています。ツールは @media (prefers-color-scheme: dark)クエリまたは.darkクラス セレクタのいずれかで反転パレットを生成できます。 ライブプレビューパネルでは、カード、ボタン、入力フィールド、バッジなどの 一般的なUI要素にテーマがどのように見えるかを表示するので、ページを 離れることなく素早くイテレーションできます。

5つのプリセット（Default Dark、Default Light、Ocean Blue、Forest Green、 Purple Dream）がカスタマイズの出発点を提供します。正確な色の値が必要な場合は、 Color Converterと組み合わせてHEX、RGB、HSL間の 変換ができます。ビジュアルグラデーショントークンには CSSグラデーションジェネレーターをお試しください。 Tailwind CSSで作業している場合は、 Tailwind CSSコンバーターがバニラCSSを ユーティリティクラスに変換できます。

すべての処理はブラウザ内で完全に実行されます。カラーデータ、テーマ設定、 生成されたCSSがサーバーに送信されることはありません。デザイントークンは お使いの端末内に留まります。

1. ドロップダウンからプリセットを選択して事前設定されたテーマで始めるか、Add Colorをクリックしてゼロから始めます。
2. 各カラーについて、カラーピッカーを使用するか16進数値を入力してベースカラーを設定します。primary、neutral、brandのような説明的な名前を付けます。
3. 各カラーの下に自動生成されるシェードスウォッチ（50〜950）を確認して、スケールが正しいことを検証します。
4. Semantic Tokensセクションで、カラーロール（background、text、primary、errorなど）を特定のカラー名とシェードにマッピングします。
5. プロジェクトのスタイルに合った命名規則（kebab-case、BEM、Tailwind）を選択します。
6. ダークモードのオン/オフを切り替え、生成方法（@mediaクエリまたは.darkクラス）を選択します。Live Previewトグルを使用してライトとダークの表示を切り替えます。
7. CopyをクリックするかCtrl+Shift+Cを押して、生成されたCSS :root {}ブロックをクリップボードにコピーし、プロジェクトのスタイルシートに貼り付けます。