画像カラーピッカー&パレット
画像カラーピッカー&パレット
画像をクリックして色を取得、主要色とパレットを自動抽出、HEX/RGBをコピーしCSS変数をエクスポート。PNG、JPG/JPEG、WebP、AVIF、HEIC/HEIF対応。
画像をここにドラッグ&ドロップまたはクリックして選択
PNG / JPG / JPEG / WebP / AVIF / HEIC / HEIF 対応
画像カラーピッカー&パレット画像をインポート:ドラッグ&ドロップまたはクリックで選択パネル切り替え:デスクトップはサイドパネル;モバイルは下部ボタンをタップクリックで取得:画像の任意の場所をクリックしてそのピクセルの色を取得色をコピー:取得後HEX/RGB/CSS形式でコピー色数を設定:スライダーをドラッグまたはプリセットをクリック(4/6/8/12/16/24/32)パレットを抽出:抽出ボタンをクリックして主要色リストを取得CSSをエクスポート:抽出後CSS変数ファイルをエクスポートJSONをエクスポート:抽出後JSONデータファイルをエクスポートリセット:現在の画像と結果をクリア
かんたんスタート
1
2
3
4
5
6
7
8
9
よくある利用シーン
デザイン/ポスターの色取得
配色スキーム用に主要色とアクセント色を抽出
テーマ/デザインシステム
プロジェクト用にCSS変数またはJSONをエクスポート
コンポーネントスタイリング
ボタン、タグ、チャート用のマッチング色を抽出
ブランド統一
ブランド素材から標準カラーパレットを抽出
カラーピッカー&パレットオプション
色数:2–32、一般的には8/12;写真/グラデーションは16–32推奨
プリセットボタン:4/6/8/12/16/24/32ワンクリック切り替え
ソート:パーセンテージの高い順、最も一般的な色が先頭
色の横の数字:画像内のピクセルパーセンテージを表示
使い方のヒント
まず8/12で全体効果を見て、必要に応じて16/24/32に増やす
プロジェクトで使用する際は--color-1をセマンティック名(例:--color-primary)に変更推奨
大きな画像の抽出時はページを前面に保持してブラウザのスロットリングを回避
制限事項と互換性
単一ファイル制限128MB、非常に大きな画像は遅延の原因に
パレット抽出はパフォーマンス向上のため自動ダウンサンプリング、結果は代表色
HEIC/HEIFデコードはブラウザサポートに依存、失敗時はJPG/PNGに変換
透明ピクセルは無視されるか実際のRGBAとして処理
プライバシーとセキュリティ
すべての処理はブラウザ内で完了;データがデバイスから出ることはありません
よくある質問
エクスポートした :root { --color-1: ... } をグローバルCSSに配置し、var(--color-1)で参照。
スクリプト/デザインシステムの再利用用、例:Design Tokensやテーマ設定の生成。各色にhex/css/rgbとcountを含む。
一般的なUI:8または12;ミニマルアイコン:4–6;写真/グラデーション:16–32。プリセットで素早く比較。
クリック取得は単一ピクセル;パレットは画像全体を量子化した代表色で全体的な傾向を強調。
まず「パレットを抽出」ボタンをクリックする必要があり、抽出完了後にエクスポートが利用可能に。
デフォルトは元のファイル名(拡張子なし)+ .palette-色数 + .css/.json、不正な文字は自動クリーニング。