画像カラー ピッカー＆パレット抽出

拡大鏡付きピクセル精度のカラーピッキング、または画像からすべての色を抽出。HEX、RGB、HSL — すべてブラウザ内で処理。

🎨
画像をここにドロップ

画像から色を抽出・ピックする方法

1
画像をアップロード
任意の画像ファイルをドラッグ＆ドロップします。正確なピクセルレベルの色サンプリングのために画像はフル解像度で読み込まれます。
2
ピックまたは抽出
ピクセルピッカー：拡大鏡でホバーしクリックしてピック。全色抽出：抽出をクリックしてすべてのユニークな色をリスト表示。
3
色の値を表示
色はHEX、RGB、HSLで表示され、コピーボタン付き。全色グリッドにはすべての色がスウォッチとして表示されます。
4
コピーしてどこでも使用
カラーコードをクリップボードにコピー。CSS、Figma、ブランドガイドライン、任意のデザインツールに貼り付け。

よくある質問

画像内の特定のピクセルの正確な色を見つけるには？
画像をアップロードし、ピクセルピッカーモードを使用します。任意の領域にホバーすると — 円形の拡大鏡レンズがカーソルを中心に10倍ズームを表示し、正確なピクセルターゲティングを可能にします。選択された色はHEX、RGB、HSLで即座に表示されます。クリックしてパレット履歴に保存します。Canvas APIが画像のネイティブ解像度で生のピクセルデータを読み取ります。
画像からすべての色を抽出するには？
全色抽出タブに切り替えて「すべての色を抽出」をクリックします。ツールは画像内のすべてのピクセルをサンプリングし（パフォーマンスのためにスケーリング）、同一色を重複排除して、出現頻度順（最も多い色が最初）にスウォッチグリッドとして表示します。類似色をマージスライダーを使用して、ほぼ同じ色合いをグループ化します。これは参照画像、ムードボード、スクリーンショットから完全なカラーパレットを作成するのに最適です。
類似色マージの許容値は何をするものですか？
許容値は類似色をどの程度積極的にグループ化するかを制御します。0では、完全に一致するRGBのみがマージされます — 写真からは500以上のユニークな色が生成される可能性があります。20〜40では、視覚的に類似した色合い（例：グラデーションやJPEGアーティファクトによるわずかに異なるピクセル）が1つの代表スウォッチにマージされます。アルゴリズムはRGB空間のユークリッド距離を使用します：sqrt((r1-r2)² + (g1-g2)² + (b1-b2)²)。ロゴやフラットグラフィックには8以下の値、写真には16〜32が適しています。
HEX、RGB、HSLカラー形式とは何ですか？
HEX（#3B82F6） — 標準CSS/ウェブ形式。RGB（59, 130, 246） — 赤、緑、青の各チャンネル0〜255、デザインソフトウェアやプログラミングで使用。HSL（217°, 91%, 60%） — 色相角度、彩度、明度。色のバリエーションを作成するのにより直感的です。3つすべてが同じ色を異なる表記法で記述しています — 用途に応じた異なる形式です。
抽出した色をCSSやデザインツールで使用できますか？
はい。任意のコピーボタン（ピクセルピッカー）をクリックするか、任意のスウォッチ（全色抽出）をクリックしてHEXコードをクリップボードにコピーします。CSSに直接貼り付け：color: #3B82F6;。RGB値はFigma、Sketch、Adobe XDなどのデザインツールで使用します。HSLを使用してプログラムで明るい/暗いバリエーションを生成します。すべての処理はローカルで行われ — 画像がサーバーにアップロードされることはありません。

画像カラーピッカー＆パレット抽出 — 2つのツールが1つに

当ツールはピクセル精度のカラーピッカーと全画像パレット抽出を組み合わせています。ピクセルピッカーは拡大鏡レンズ（10倍ズーム）で個別のピクセルをターゲットにし、正確なHEX、RGB、HSL値を取得します — ロゴ、UIモックアップ、写真から特定の色をサンプリングするのに最適です。全色モードは画像全体からすべてのユニークな色を抽出し、各色の出現頻度順に並べ替え可能なスウォッチグリッドとして表示します。これらを組み合わせることで、外科的に正確な単一ピクセルサンプリングから包括的なパレット発見まで、色抽出の完全なワークフローをカバーします。

ピクセルピッカーモード — 外科的な色の精度

ピクセルピッカーはHTML5 Canvas APIのgetImageData()メソッドを使用して、カーソル下のピクセルの正確なRGB値を読み取ります。円形の拡大鏡は11×11ピクセルの領域を10倍ズームでクロスヘアオーバーレイ付きで表示し、肉眼では見えない高解像度画像上のピクセルでも正確にターゲットできます。選択された各色は同時に3つの形式で表示されます：

任意の色をクリックしてパレット履歴に保存します（最大12色）。パレットを生成ボタンを使用して、頻度分析により最も支配的な5色を自動抽出します — 任意の画像の主要なカラースキームを素早く取得する方法です。

全色モード — 完全なパレット抽出

ピクセルピッカーが個別のポイントのサンプリングに優れている一方で、全色抽出タブは「この画像には実際にどのような色が含まれているのか？」という問いに答えます。すべてのピクセルを体系的にサンプリングし（パフォーマンスのために縮小解像度で — 通常150×150ピクセル、つまり22,500サンプル）、同一色を重複排除し、HEXコード付きのカラースウォッチグリッドとして結果を表示します。色は出現頻度順にソートされます — 最も多い色が最初に表示されます。

類似色をマージ許容値スライダーがキーコントロールです。これがないと、JPEG圧縮アーティファクト、微妙なグラデーション、センサーノイズにより、写真からは視覚的に区別できない数百の色が生成される可能性があります。許容値を上げると、RGB空間でのユークリッド距離がしきい値を下回る色がマージされます。これにより、圧倒的なリストではなく、クリーンで使いやすいパレットが得られます。ロゴやフラットカラーのグラフィックには許容値を0〜5に保ちます。写真には16〜32が通常最良の結果をもたらします。

各モードの使い分け

プライバシーと処理

すべての画像処理はCanvas APIを使用して完全にブラウザ内で行われます。画像がサーバーにアップロードされることはありません — ファイルはデバイス上に留まります。ツールはピクセルデータをローカルで読み取り、すべての計算をJavaScriptで実行し、結果を即座に表示します。アカウント不要、クラウド処理なし、データ収集なし。ページが読み込まれた後はオフラインでも使用できます。