本文へスキップ

画像カラーピッカー&パレット

画像カラーピッカー&パレット

画像をクリックして色を取得、主要色とパレットを自動抽出、HEX/RGBをコピーしCSS変数をエクスポート。PNG、JPG/JPEG、WebP、AVIF、HEIC/HEIF対応。

画像をここにドラッグ&ドロップまたはクリックして選択

PNG / JPG / JPEG / WebP / AVIF / HEIC / HEIF 対応

画像カラーピッカー&パレット

かんたんスタート

1
画像をインポート:ドラッグ&ドロップまたはクリックで選択
2
パネル切り替え:デスクトップはサイドパネル;モバイルは下部ボタンをタップ
3
クリックで取得:画像の任意の場所をクリックしてそのピクセルの色を取得
4
色をコピー:取得後HEX/RGB/CSS形式でコピー
5
色数を設定:スライダーをドラッグまたはプリセットをクリック(4/6/8/12/16/24/32)
6
パレットを抽出:抽出ボタンをクリックして主要色リストを取得
7
CSSをエクスポート:抽出後CSS変数ファイルをエクスポート
8
JSONをエクスポート:抽出後JSONデータファイルをエクスポート
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として処理

プライバシーとセキュリティ

すべての処理はブラウザ内で完了;データがデバイスから出ることはありません

よくある質問

5

次の作業に役立つ関連ツールです。