Image Color Picker：写真から色を抽出

Image Color Picker とは？

近日公開: Image Color Picker は、画像のピクセルを直接クリックして正確な色の値を抽出できるブラウザベースのツールです。写真をアップロードし、任意のエリアにカーソルを合わせてリアルタイムの拡大鏡オーバーレイで色をプレビューしてから、その位置の正確なHEX、RGB、HSL、CMYKの値を取得するためにクリックします。ブラウザの開発ツールやデスクトップのスポイトとは異なり、このツールはアップロードされた画像ファイルを処理し、セッション中のピックからパレットを構築し、任意のフォーマットをワンクリックでクリップボードにコピーします。すべてブラウザ内で実行されます。サーバーへのアップロードもアカウントも不要です。

主な機能

• 画像から色をクリックして選択：読み込まれた画像上のマウスクリックごとに、画像が表示エリアに合わせてどのようにスケールされているかを考慮した上で、その位置の正確なピクセルカラーを取得します。
• 精度のためのズーム拡大鏡：画像上でカーソルを移動すると、60×60pxの浮動プレビュースクエアが位置を追跡し、カーソル下の色とそのHEX値を表示するので、クリック前に何を選択しようとしているかが正確にわかります。
• HEX、RGB、HSL、CMYKの値を抽出：選択した色はすべて4つのフォーマットで同時に表示されます。コンポーネントは、共有カラーユーティリティライブラリのrgbToHex、rgbToHsl、rgbToCmyk変換関数を使用しています。
• ピックからカラーパレットを構築：ツールはセッション中に選択した最後の10つのユニークな色を保持します。重複するHEX値は無視されます。同じ色を2回クリックしても2番目のエントリは追加されません。
• カラーヒストリーの追跡：クリックしたパレットスウォッチにより、以前に選択した色に戻って再選択せずにすべての4つのフォーマット値を確認できます。
• ワンクリックで色をコピー：現在のカラーパネルの各フォーマット行には独自のコピーボタンがあります。「Copy All Colors」ボタンはセッションパレット全体をHEX値のカンマ区切りリストとしてエクスポートします。
• 100%クライアントサイド処理：画像は非表示のHTML5 Canvasエレメントに描画されます。すべてのピクセル読み取りはgetImageData()をローカルで使用します。データはブラウザから外に出ません。
• あらゆる画像フォーマットに対応：ファイル入力はaccept="image/*"を使用するため、ブラウザがデコードできる任意のフォーマット（JPEG、PNG、WebP、GIF、AVIF、SVG）がサポートされています。

Image Color Pickerの使い方

ステップ1：画像をアップロードする

近日公開: Image Color Pickerを開きます。破線のドロップゾーンのあるアップロードパネルが表示されます。ゾーンをクリックしてファイルピッカーを開くか、画像ファイルを直接ドラッグ＆ドロップします。画像が正常に読み込まれると、ツールは「Image loaded」というトースト通知を表示し、以前に選択した色をクリアします。

ステップ2：ホバーして色をプレビューする

画像が表示されたら、任意のエリアにカーソルを移動します。60×60pxの浮動カラースクエアがカーソルに追従し、検査しているピクセルが隠れないよう右上にわずかにオフセットされています。スクエアはカーソル下のライブカラーで塗りつぶされ、コントラストのあるテキストでHEX値が表示されます。この拡大鏡はカーソルが画像から離れると消えます。

ステップ3：クリックして色を取得する

画像上の任意のポイントをクリックしてその色を確定します。「Current Color」パネルが画像の下に表示され、以下を示します：

• コントラストのあるテキストでHEX値が中央に表示された大きなカラースウォッチ
• HEX、RGB、HSL、CMYKの4行。それぞれにコピーボタン付き

たとえば、写真のミッドトーンの空をクリックすると次のような結果が得られます：

HEX:  #6fa8dc
RGB:  rgb(111, 168, 220)
HSL:  hsl(210, 59%, 65%)
CMYK: cmyk(50%, 24%, 0%, 14%)

ステップ4：パレットを構築する

画像のさまざまなエリアをクリックし続けます。選択したユニークな色は、下部の「Picked Palette」パネルにスウォッチとして表示されます。任意のスウォッチをクリックして、アクティブな現在の色として再読み込みし、すべての値を再度確認します。パレットはセッションごとに最大10のユニークな色を保持します。

ステップ5：色をコピーする

その行のコピーボタンを使用して単一のフォーマット値をコピーします。パレット全体をエクスポートするには「Copy All Colors」をクリックします。これにより、すべてのHEX値がカンマ区切りの文字列としてクリップボードに書き込まれます（例：#6fa8dc, #2d5f8e, #f4c842, #e8573a）。アップロードゾーンからいつでも新しい画像を読み込めます。パレットは自動的にリセットされます。

実用的な例

ロゴからブランドカラーを取得する

会社のロゴのPNGがあり、CSSスタイルシート用の正確なブランドカラーが必要です。ロゴをアップロードし、プライマリブランドカラーにホバーしてクリックして取得します。次に、セカンダリカラーとアクセントカラーを選択します。「Copy All Colors」を使用して選択したすべての16進数値のカンマ区切りリストを取得し、それを直接:rootCSS変数に貼り付けます。

写真からカラーパレットをサンプリングする

製品写真にUIデザインに使用したい自然なカラースキームがあります。写真をアップロードし、ドミナントカラーを体系的にクリックします。背景トーン、製品のハイライト、シャドウエリア、アクセントディテール。パレットパネルには最大10のユニークなスウォッチが蓄積されます。完了したら、各スウォッチをクリックして数値のカラー入力を受け付けるデザインツールで使用するためのRGB値を取得します。

バグレポート用に特定のピクセルカラーを特定する

UIの特定のボタン状態に誤ったテキストカラーがあり、スクリーンショットがあります。スクリーンショットをアップロードし、ボタンのテキストにホバーしてクリックします。HEX値をコピーし、期待値とともにバグレポートに含めます。これにより、どの正確な色が誤ってレンダリングされているかについての曖昧さがなくなります。

ヒントとベストプラクティス

精度が重要な場合は高解像度の画像を使用してください。ツールはレンダリングサイズとキャンバスサイズの比率に基づいたスケールファクターを使用してカーソル位置を実際の画像ピクセル座標にマッピングするため、エクスポート前に画像エディタでディテールにズームインすると、視覚的なエリアごとに処理可能なピクセルが増えます。

拡大鏡はクリックする前にHEX値を表示します。これを使って、テキストや細い線からサンプリングする際に特に重要な、隣接するアンチエイリアスエッジピクセルではなく、正確に正しいピクセルにいることを確認してください。

パレットは重複するHEX値を無視します。1つのチャンネルだけ異なる2つの視覚的に似た色を比較したい場合は、1つを選択して値をメモし、次にもう1つを選択します。

すべてのパレットカラーをコピーする際、出力はカンマ区切りのHEX値です。これを近日公開: Palette Generatorの16進数入力に直接貼り付けて、抽出した色のハーモニーバリエーションを探索できます。

よくある問題とトラブルシューティング

ファイル選択後「Load error」トーストが表示される：画像の読み取り後にデコードに失敗しました。これは通常、破損したファイルやブラウザが解析できないフォーマット（一部のTIFFおよびRAWカメラファイル）で発生します。画像をJPEGまたはPNGに変換してから再試行してください。

クリックしても色が取得できない / 拡大鏡が表示されない：キャンバスが正しく初期化されなかった場合に発生します。ツールをリロードして画像を再アップロードしてください。画像が非常に大きい場合（8000×8000ピクセル以上）、一部のブラウザはキャンバスサイズを制限します。アップロード前に画像のサイズを変更してください。

選択した色がすべて同じに見える：均一なエリア（背景、ベタ塗り）をクリックしている可能性があります。写真エディタで画像にズームインしてより多くのディテルがあるエリアを見つけてから、そのトリミングされたバージョンをアップロードします。

パレットスウォッチがクリックに反応しない：最後の10個のユニークなカラーのみが保持されます。すでに10色を選択している場合、後続のユニークな色が最も古いエントリを置き換えます。スウォッチをクリックすると常に色を再読み込みできます。パレットが反応しないように見える場合は、クリックがスウォッチに当たっており、スウォッチ間のギャップではないことを確認してください。

ドラッグ＆ドロップが機能しない：ドロップゾーンはfile.type.startsWith('image/')をチェックします。MIMEタイプがないファイルや誤ったタイプのファイルは無視されます。フォールバックとしてクリックして参照する方法を使用してください。

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

Image Color Pickerはファイルを完全にブラウザ内で処理します。画像をアップロードすると、FileReader APIを使用してデータURLとして読み込まれ、非表示のキャンバスエレメントに描画されます。サーバーにデータは送信されません。画像がデバイスから出ることはありません。このツールはページが読み込まれた後、インターネット接続なしで動作するため、機密写真、専有のデザインアセット、内部スクリーンショットに安全に使用できます。

よくある質問

Image Color Pickerは無料ですか？

はい、Image Color Pickerは使用制限なく完全無料です。使用するためにアカウント、サブスクリプション、支払いは必要ありません。このツールは近日公開: Glyph Widgetsで利用可能で、ブラウザ上で直接動作します。

Image Color Pickerはオフラインで動作しますか？

はい。ページが読み込まれた後、すべての処理はHTML5 Canvas APIをローカルで使用します。インターネットから切断しても、中断なく画像から色を選択し続けることができます。このツールは通常の使用中にネットワークリクエストを行いません。

Image Color Pickerで私のデータは安全ですか？

画像はFileReaderとgetImageData()を使用してすべてクライアントサイドで処理されます。サーバーに画像データはアップロードされません。Glyph Widgetsはこのツールで開いたファイルのコンテンツにアクセスできません。

ツールはどのようなカラーフォーマットを出力しますか？

ツールは選択した各色に対して4つのフォーマットを出力します：HEX（例：#6fa8dc）、RGB（例：rgb(111, 168, 220)）、HSL（例：hsl(210, 59%, 65%)）、CMYK（例：cmyk(50%, 24%, 0%, 14%)）。各フォーマットには独自のコピーボタンがあります。

1回のセッションで何色選択できますか？

パレットは最後に選択した10のユニークな色を保持します。重複するHEX値は再度保存されません。同じ色を2回クリックしてもパレットのカウントに影響はありません。新しい画像を読み込むとパレットが空にリセットされます。

どの画像フォーマットがサポートされていますか？

ファイル入力はaccept="image/*"属性を使用して、ブラウザがデコードできる任意の画像フォーマットを受け付けます。実際には、JPEG、PNG、WebP、GIF、AVIF、SVGが含まれます。ブラウザがネイティブにデコードできないRAWやTIFFなどのフォーマットはロードエラーを生成します。

コピー後に同じ画像から再び色を選択できますか？

はい。画像はクリアするか新しい画像を読み込むまでツールに読み込まれたままです。再アップロードなしに、好きなだけクリックし、パレットを構築し、色をコピーし続けることができます。

カラーサンプリングはどのくらい正確ですか？

ツールはgetImageData(x, y, 1, 1)を使用してクリックした位置の正確に1ピクセルを読み取ります。表示された画像サイズと実際のキャンバス寸法の間のスケールマッピングはgetBoundingClientRect()から計算されるため、画像がネイティブ解像度とは異なるサイズで表示されていても、その位置での真のピクセルカラーを正確に反映します。

拡大鏡は何のためですか？

浮動拡大鏡プレビューは、選択を確定する前のカーソル下の現在の色を示します。これにより、今まさにサンプリングしようとしているピクセルを正確に特定できます。隣接するピクセルが大きく異なるカラーバウンダリ、グラデーション、アンチエイリアスエッジに沿って特に役立ちます。

1回の操作でパレット全体をエクスポートできますか？

「Copy All Colors」をクリックすると、選択したすべてのHEX値がカンマ区切りリストとしてクリップボードに書き込まれます。それをデザインツール、CSS変数、またはさらなる色作業のための近日公開: Palette Generatorに貼り付けることができます。

関連ツール

• 近日公開: Palette Generator — ピッカーで抽出したベースカラーから補色、類似色、三角形配色などのカラーハーモニーを生成。
• Color Converter — HEX、RGB、HSL、CMYKおよびその他のフォーマット間を完全な精度で変換。
• Contrast Checker — パレットの2色間のWCAGアクセシビリティコントラスト比を検証。
• Color Picker — カラーホイールとスライダーを使用して、画像なしで直接色を選択。

今すぐ Image Color Picker を試す: 近日公開: Glyph Widgets Image Color Picker