パレットをCSS変数に変換
4 色
カラープレビュー
#1E293B
#0EA5E9
#10B981
#F43F5E
CSS変数
:root {
--color-1: #1E293B;
--color-2: #0EA5E9;
--color-3: #10B981;
--color-4: #F43F5E;
}関連する外部サイト
一部のリンクはアフィリエイトリンクを含みます。
関連ツール
配色ジェネレーターベース色から補色・類似色・トライアドなど色彩理論に基づく調和したカラーパレットを自動生成。色をロックして再生成、CSS変数・Tailwind・JSONに書き出し。グラデーションジェネレーターlinear・radial・conic の CSS グラデーションを複数カラーストップで作成。角度・形状・中心を調整し、background CSS や Tailwind 値をワンクリックでコピー。画像配色抽出画像をサーバーに送らずブラウザ内だけで主要カラー（HEX/RGB）と占有率（%）を抽出。色数指定・ワンクリックコピー・CSS/JSON書き出し対応。フォントペアリングツールGoogle Fonts の見出し×本文フォント組み合わせをリアルタイムでプレビュー。CSSを1クリックでコピー。
パレット（またはHEXカラーコードを含む任意のテキスト）を貼り付けると、カラーを抽出してCSSカスタムプロパティ、SCSS変数、またはTailwindカラー設定として書き出します。重複は除去され、各カラーに番号付きの名前が付与されます。すべてブラウザ内で処理されます。
使い方
- HEXカラー（またはそれを含むテキスト）をボックスに貼り付けます。
- 名前プレフィックスを設定し、CSS・SCSS・Tailwindのいずれかを選びます。
- 生成されたコードをスタイルシートや設定ファイルにコピーします。
仕組み
テキスト内の3桁または6桁のHEXコード（#ありなし問わず）を検出し、大文字6桁に正規化して、出現順を保ちながら重複を除去します。各カラーはプレフィックスを使った番号付き変数になり、選んだ出力形式（CSS の :root カスタムプロパティ、SCSS の $変数、Tailwind の theme.extend.colors オブジェクト）にフォーマットされます。
主な機能
スマートな抽出
貼り付けたテキスト内のHEXコードを自動検出し、それ以外は無視します。
3つの出力形式
CSSカスタムプロパティ、SCSS変数、Tailwind設定を選べます。
重複除去
同じカラーは1つにまとめられ、変数が重複しません。
完全プライベート
カラーはブラウザ内で処理され、アップロードされることはありません。
こんなときに
デザイン引き渡し
デザインツールのパレットを素早くコードトークンに変換します。
テーマ作成
サイトのテーマ用にCSS変数のセットを作成します。
Tailwindプロジェクト
ブランドカラーをTailwind設定に直接追加します。
スタイルガイド
一貫した変数名でカラーシステムをドキュメント化します。
注意事項
- #RGB と #RRGGBB の両方が受け付けられ、正規化されます。
- カラーは最初に出現した順序を保持し、重複は削除されます。
- 意味のある名前が必要な場合は貼り付け後に変数名を変更してください。
- すべての処理はデバイス上で行われ、アップロードはされません。
よくある質問
- どんな入力を受け付けますか？
- HEXコードを含む任意のテキスト（スペース区切り、カンマ区切り、スタイルシートからの貼り付けなど）。カラー以外のテキストは無視されます。
- 短縮HEXに対応していますか？
- はい。#abc のような3桁のHEXは自動的に #AABBCC に展開されます。
- 変数名は変更できますか？
- プレフィックスで基本名を設定し、番号は自動で付与されます。意味のある名前にしたい場合は結果を編集してください。
- Tailwind出力とは何ですか？
- カラーを theme.extend.colors に配置した module.exports 設定で、tailwind.config.js にそのままマージできます。
- カラーはアップロードされますか？
- いいえ。すべてブラウザ内で処理され、デバイスから出ることはありません。