画像カラーピッカー

ピクセルピッカーとパレット抽出ツール：2つの異なる用途

よくある混乱を先に解消しておこう：これはピクセルピッカーであって、パレット抽出ツールではない。2つのツールは似た名前で、どちらも画像を扱うが、答える問いが異なる：

• ピクセルピッカー（このツール）：正確な場所をクリックすると、ツールはその1ピクセルの色を読み取る。特定の要素の色が必要なとき（ロゴのブランドカラーの赤・参考写真の空の正確な青・スクリーンショットのUIの背景のオフホワイト）に使う。
• パレット抽出ツール：ツールが画像全体を分析し、統計的に支配的な5〜8色を返す。特定の一点ではなく、画像全体から着想を得たカラースキームが欲しい場合に使う。

統計的な支配色が実際に必要なら、無料カラーパレット抽出ツールツールが適切な選択だ。2つのツールは補完的な関係にある：パレットを抽出して全体のカラーストーリーを把握し、このピッカーで特定のアクセントカラーを取得する。

仕組み

ブラウザはアップロードされた画像をHTML <canvas> 要素に描画する。クリックすると、ツールはCanvas 2D APIのメソッド ctx.getImageData(x, y, 1, 1) を呼び出す。これは1ピクセルのRGBA値を4要素の配列（赤・緑・青・アルファ）として返す。それらの値はHEX・RGB・HSLにフォーマットされて表示される。マグニファイアは2つ目のキャンバスで、カーソル周辺の小さな領域をコピーして拡大表示し、次に選択するピクセルを正確に確認できる。すべてブラウザ内でローカルに実行され、画像のデータは送信されない。

ピクセルピッカーを使う場面

• ブランドの色合わせ：デザインやマーケティングアセットで使うために、ロゴの正確な色を取得する。
• 参考写真：参考画像から正確な空の色調・肌の色・自然素材の色を見つける。
• デザインQA：スクリーンショットが仕様の色にピクセル単位で一致するか確認する。
• 既存サイトのリバースエンジニアリング：DevToolsが使えない場合（同僚からのスクリーンショット、競合他社のインターフェース）にボタンや背景の実際のレンダリング色を取得する。
• モックアップ分析：ムードボードやデザインカンプから正確な色を抽出する。
• モバイルスクリーンショットの検査：電話のスクリーンショットを元のデバイスなしでデスクトップで調べられる。
• アクセシビリティ監査：テキストやUI要素の実際のレンダリング色を読み取る（アンチエイリアシングや透明度の重なりによりCSSのソース値と異なることがある）。

HEX・RGB・HSL：同じ色の3つの記法

ツールが同じ色の値を3つの形式で出力するのは、コンテキストによって好みの形式が異なるためだ：

• HEX：#2b7190。コンパクトな6文字で、ウェブデザインとほとんどのコピー＆ペーストのワークフローで事実上の標準だ。CSS・デザインツールのカラーピッカー・マークダウンにそのまま貼り付けられる。
• RGB：rgb(43, 113, 144)。基礎となる数値の形式。チャンネルを個別に調整したい場合や、小数値を期待するツール（Tailwindの任意の値、プログラム生成）で作業する場合に便利だ。
• HSL：hsl(199, 54%, 37%)。色相・彩度・明度で、人間が直感的に扱いやすい。「同じ色相で少し明るく」という調整はHSLでは1つの数値の変更で済むが、HEXやRGBでは複数チャンネルの変更が必要になる。

アンチエイリアシングの落とし穴

ピクセル単位のピッカーはカーソル下の正確なピクセルを読み取るが、実際の画像では、そのピクセルが思い通りの色ではないことがある。アンチエイリアシングは文字・アイコン・曲線形状のエッジを周囲の背景と混合してなめらかに見せる。そのため白地の黒いテキストの「エッジ」をクリックすると、純粋な黒ではなくグレーが返ってくることがある。落とし穴を避けるための2つの実践的な習慣：

• ソリッドな形状の中心から選択し、アンチエイリアシングが発生するエッジからは選ばない。
• マグニファイアを使って、混合されたエッジピクセルではなくはっきりとしたブランドカラーのピクセル上にいることを確認する。

JPEG圧縮と参考画像の品質が重要な理由

JPEG圧縮はコントラストの強いエッジや均一なベタ塗り領域を中心に、わずかな色の歪みをもたらす。「純粋な赤」（#FF0000）のブランドカラーをJPEGとしてエクスポートして再インポートすると、#FE0102 などとして読み取られることがある。近いがソースと同一ではない。正確なブランドカラーの照合には次のものを優先すること：

• 色を選択する場合はPNGまたはWebPロスレスのソース画像を使う。
• ベクターソースファイル（SVG、PDF）を高ズームでレンダリングする。ベクターの色は正確だ。
• 可能な場合はデザインツール（Figma、Sketch、Photoshop）から直接取得する。スクリーンショットからではなく。

ブラウザレベルとOSレベルのスポイトの代替手段

画面から色を選択する他の方法がいくつかある：

• CSS EyeDropper API（new EyeDropper()）。MDNの状態：「限定的な可用性：このフィーチャーは最も広く使われているブラウザの一部で動作しないためBaselineではありません。」実際には、Chrome 95以降のChromeとEdgeはサポートしているが、FirefoxとSafariにはない。色を { sRGBHex } として返す。サポートされている環境では良い選択だが、対応状況のまばらさにより、クロスブラウザの用途ではCanvasベースのピッカーがまだ役に立つ。
• macOS Digital Color Meter：画面上の任意のピクセルを読み取るmacOS組み込みアプリ。
• Windows PowerToys Color Picker：MicrosoftのPowerToysユーティリティにピクセルピッカーが含まれている。
• ブラウザのDevTools：ChromeとFirefoxはどちらも、インスペクターでCSSを編集する際のカラーピッカーUIにスポイトが含まれている。

ウェブベースのピッカーがまだ役に立つ理由：SlackやメールでやりとりされたスクリーンショットでもOK、ソフトウェアのインストール不要、任意のOSの任意のブラウザで動作し、画像がマシンの外に出ない。

プライバシー

画像にはピクセル以上の情報が含まれていることが多い：EXIFメタデータには写真が撮影されたGPS座標・カメラのシリアルナンバー・元の撮影タイムスタンプが含まれることがある。スクリーンショットには機密のUI・草稿テキスト・プレリリースのブランディングが含まれることがある。顔は複数の管轄の個人情報保護法の下で生体識別子だ。このツールはブラウザ内で完全に動作し、画像はファイルシステムからインメモリのキャンバスに読み込まれ、ピクセル単位でサンプリングされ、ページを離れるのはコピーしたときの色の値だけだ。サーバーサイドのピッカーツールは画像全体をアップロードする。それが両者の違いだ。

よくある間違い

1. アンチエイリアシングのかかったエッジで選択する。得られる色は形状と背景の混合色だ。代わりにベタ塗り部分の中央から選択すること。
2. 強く圧縮されたJPEGから選択する。圧縮アーティファクトが色を微妙にずらす。正確なブランドカラーの照合には高品質のソースを使うこと。
3. ピッカーをパレット抽出ツールと混同する。画像全体の支配色が欲しい場合は、ピクセルピッカーではなくパレット抽出ツールが必要だ。
4. 透明なPNGをカラーのページ背景に重ねて選択する。キャンバスが透明度を合成する方法によっては、アルファチャンネル越しにページの背景色をサンプリングしてしまう可能性がある。精度が重要な場合は、先に画像を既知の背景に変換すること。
5. スクリーンショットの色を正確だと思い込む。一部のモニターはカラーキャリブレーションを適用し、ソースからレンダリング色をずらす。ピッカーが読み取るピクセル値は画像にエンコードされたものであり、元の表示デバイスが示していたものとは限らない。
6. 低解像度の画像から選択して細部を見逃す。ロゴの200×100サムネイルでは、元のアセットと比べて選べる異なるピクセルが少ない。可能な限り最高解像度のソースで作業すること。

よくある質問

このツールとカラーパレットジェネレーターの違いは何ですか？

ピッカーはクリックした特定の1ピクセルの色を読み取る。パレットジェネレーターは画像全体を分析し、統計的に最も支配的な色を返す。異なる用途：ピッカーは精密で、パレットジェネレーターは解釈的だ。画像からパレットを生成するには無料カラーパレット抽出ツールを参照。

選択した色がブランドの仕様と異なるのはなぜですか？

よくある2つの理由。まず、選択に使った画像が圧縮されている可能性がある（JPEGの再エンコードはRGB値を数値分ずらす）。次に、クリックしたピクセルが背景と混合されたアンチエイリアシングのかかったエッジにある可能性がある。正確なブランドカラーの照合には、ベクターソースまたは高品質のPNG・WebPロスレスを使い、ベタ塗り部分の中央から選択すること。

モバイルで使えますか？

はい、タッチデバイスでタップして選択できる。ただし、マグニファイアの動作と正確なピクセル精度はモバイルブラウザによって異なることがある。モバイルでのピクセル単位の精密作業では、大きなタッチターゲットにより正確な選択が難しいため、色に関わる重要な選択はできるだけデスクトップブラウザで行うことを検討すること。

画像はどこかにアップロードされますか？

いいえ。画像はブラウザの FileReader / 画像読み込みAPIを通じてローカルのCanvas要素に読み込まれ、ピクセルの読み取りは getImageData を通じて行われ、サーバーには何も送信されず、アナリティクスのエンドポイントにも画像は渡らない。画像にEXIF GPSデータ・顔・機密UIのスクリーンショット・アップロードしたくないプレリリースのブランディングが含まれている場合に便利だ。

CSSに値が表示されているのに、なぜ画像から色を選択するのですか？

CSSは宣言された色を示すが、レンダリングされたピクセルは異なることがある。グラデーション・不透明度の重ね合わせ・アンチエイリアシング・ダークモードの調整・ブラウザのカラープロファイル処理・スクリーンショット圧縮がすべて差異を生む。ピクセルが実際にどうなっているかを知る必要がある場合（デザインQA・アクセシビリティ・参考資料との照合）、レンダリングされたピクセルを直接読み取ることだけが信頼できる答えだ。

マグニファイアはなぜ役に立つのですか？

個々のピクセルは非常に小さく、通常の画面解像度では肉眼で区別できないサイズだ。マグニファイアはカーソル下の領域を拡大して表示するため、クリックするピクセルを正確に確認できる。隣接するピクセルが微妙に異なる、密集した画像・アンチエイリアシングのかかったテキスト・曲線形状では特に役に立つ。