画像カラーピッカーの機能と特徴
「画像カラーピッカー」は、お使いのデバイスから画像を選択し、その画像内の任意のピクセルから色情報を抽出できるツールです。ピクセル単位の正確な選択をサポートするために、ポインター周辺ピクセルの拡大表示（虫眼鏡機能）が提供されます。
色を選択すると、そのピクセルのHEX、RGB、HSL値が表示され、抽出した複数の色を保存した色リスト（履歴）に保存することができます。保存した色情報は、他のデザインツールやコードで利用するために簡単にコピーできます。
画像を読み込むと、即座に中央ピクセルの色情報と座標が表示されます。画像上をポインターで移動すると、ピクセル単位でリアルタイムに色が抽出されます。
入力可能な画像フォーマットと制限
本ツールでは、デバイスからシングル画像ファイルを読み込んで処理します。対応しているファイル形式およびMIMEタイプは以下の通りです。
- 対応フォーマット: PNG、JPG、WebP、GIF、AVIF、HEIC
- 対応MIMEタイプ:
image/jpeg、image/png、image/webp、image/gif、image/avif、image/heic、image/heif
なお、画像の長辺が4096ピクセルを超える場合は、自動的に縮小処理が行われます。
もしサポートされていないファイル形式をドロップした場合は、「サポートされていないファイル形式です。PNG、JPG、WebP、GIF、AVIF、またはHEIC画像を使用してください。」というエラーメッセージが表示されます。また、画像が破損しているなどの理由で読み込めない場合は、「この画像を開けませんでした。ファイルが破損しているか、サポートされていない形式の可能性があります。」と表示されます。
操作方法とキーボードショートカット
マウスやトラックパッドによる直感的な操作に加え、キーボードを使用した精密な操作にも対応しています。
- ポインター操作: 画像の上でポインターを動かすことで色を抽出し、クリックすると「
{hex}を保存リストに追加しました。」と表示され、その色が保存されます。 - キーボード操作: 画像にフォーカスを合わせた状態で、矢印キーを使用することで十字カーソルを1ピクセルずつ動かして色を抽出できます。
- 高速移動: Shiftキーを押しながら矢印キーを押すと、十字カーソルを10ピクセル単位で大きく移動させることができます。
- キーボードでの保存: EnterキーまたはSpaceキーを押すことで、現在抽出している色を保存リストに保存できます。
保存した色リストには最大12個の色を記録できます。RGB値が同じであっても、不透明度（アルファ値）が異なる場合は、それぞれ別の色として履歴に保存されます。
「最初からやり直す」ボタンをクリックすると、読み込まれている画像がクリアされ、保存した色の履歴もすべて削除されてツールが初期状態に戻ります。
出力される色情報とクリップボードへのコピー
ピクセルを選択すると、以下の情報が出力されます。
- サイズ: 読み込まれた画像の寸法（幅と高さ）が表示されます。
- ピクセル: 現在抽出しているピクセルの座標が表示されます。
- HEX / RGB / HSL: 抽出されたピクセルの色コードがそれぞれの形式で表示されます。
表示されているHEX、RGB、HSLのいずれかの値をクリックすると、クリップボードにその値がコピーされます。ブラウザの設定やセキュリティ制限によってクリップボードへのアクセスが拒否された場合は、「コピーできませんでした。ブラウザによってクリップボードへのアクセスがブロックされています。」というエラーメッセージが表示されます。
透過処理と画像圧縮が与える影響
本ツールは、画像ファイルに保存されている生のピクセル値を正確に読み取って表示します。そのため、以下の点に留意する必要があります。
- 半透明ピクセルの扱い: 対象ピクセルが半透明である場合、背景に何があるかは考慮されず、そのピクセル単体のデータとして読み取られます。このとき、画面には「不透明度
{n}% — このピクセルは一部透過しています。」と表示されます。 - 圧縮とアンチエイリアス: 読み込んだ画像がJPEG形式である場合や、スクリーンショットである場合、画像圧縮やアンチエイリアス（境界線を滑らかにする処理）の影響によって、目視した色と実際のピクセル値がわずかに異なっていることがあります。
プライバシーとデータ処理について
プライバシー保護のため、選択した画像はお使いのデバイスから直接読み込まれ、ブラウザの外に出ることはありません。画像データがBroBroGoにアップロードされることは一切ありません。
よくある質問（FAQ）
画像から色を抽出するにはどうすればよいですか？
画像の上にポインターを移動すると、パネルにその位置の色が表示されます。虫眼鏡で拡大表示されるため、正確なピクセルを狙うことができます。クリックすると、その色が保存リストに追加されます。また、画像にフォーカスを合わせて矢印キーで十字カーソルを動かし、Enterキーを押して保存することも可能です。
どのカラー形式を取得できますか？
抽出したピクセルの値は、HEX、RGB、HSL形式で同時に表示されます。任意の値を1クリックでコピーでき、CSSやデザインツールにそのまま貼り付けられます。
抽出した色が想定していた色と一致しないことがあるのはなぜですか？
画像に保存されている正確なピクセル値を取得します。JPEG画像やスクリーンショットの場合、圧縮やアンチエイリアス処理によって周囲のピクセル値がわずかに変化していることがあります。また、半透明のピクセルは、背景に何があるかに関わらず、そのピクセル単体の値として読み取られます。