ツール一覧

🇺🇸EN 🇯🇵JA 🇨🇳ZH 🇰🇷KO

CSS変数生成

カラーパレットからCSSカスタムプロパティ（変数）を生成します。

Selector

:

:

:

:

:

CSS Output

:root {
  --color-primary: #3b82f6;
  --color-secondary: #64748b;
  --font-size-base: 16px;
  --spacing-4: 1rem;
  --border-radius: 8px;
}

関連ツール

カラーコード変換（HEX/RGB/HSL）CSS単位変換（px/rem/em）CSSカラー名一覧グラデーション生成

CSS変数生成の主な使い方・用途

✓CSSカスタムプロパティの管理
✓テーマカラーの設定
✓CSS変数の生成

使い方（ステップ別）

1
変数名と値を入力する— CSS変数のキーと値を入力します。
2
CSSをコピーする— 生成された:root{}ブロックをコピーできます。

このツールの特徴

●カラーピッカー表示
●複数変数の管理
●コピー機能

このツールについて

カラーパレットからCSSカスタムプロパティ（変数）を生成します。