画像内の任意の色のHEXコードを取得する方法
2026-05-15
手っ取り早く言うと: 画像をToolKoalaのカラーピッカーに落として、欲しい画素をクリックし、HEX（とRGB）の値をコピーする——すべてブラウザ内で、サーバーには何もアップロードされません。スクリーンショット、写真、デザインのモックアップから正確な色を、何もインストールせずに取り出す最速の方法です。
HEXコードを取得する方法
- カラーピッカーを開いて、画像やスクリーンショットをドラッグします（PNG、JPG、WebPどれでも動きます）。
- カーソルを画像の上で動かします。拡大ルーペが、これからサンプリングする画素を見せてくれるので、1ピクセルずれることがありません。
- 狙った画素をクリックします。ツールはその画素のRGB値を、メモリ上のキャンバスから直接読み取ります。
- HEXコード（
#3B82F6のような）やRGB文字列をコピーします。好きなだけ画素を繰り返しサンプリングできます。
画素データをローカルで読んでいるので、サーバーへの往復も待ち時間もありません。使っている間にブラウザのDevToolsのネットワークタブを開いてみてください——アップロードのリクエストはゼロのはずです。それこそが肝心な点です。
僕が実際にこれを使う場面
- ブランドカラーを合わせる。 クライアントがブランドガイドなしのフラットなPNGでロゴを送ってくる。そのブルーをサンプリングして
#1D4ED8を取得、完了。 - パレットを作る。 気に入った写真やスクリーンショットから5、6色サンプリングすれば、当てずっぽうなしで出発点のパレットができます。
- 不一致を直す。 「このボタンの色合いが微妙に違う」——両方サンプリングしてHEXを比べ、ちょっとずれた値を見つけます。
ブラウザが最近のもの（Chrome、Edge）なら、ネイティブの EyeDropper APIもあり、アップロードした画像の中だけでなく、画面上の任意の画素をサンプリングできます。ToolKoalaのピッカーは代わりにキャンバスに頼っているので、ブラウザ間で同じように動き、どこにも開いていないファイルにも使えます。
ほかのツールとの正直な比較
- macOS Digital Color Meter — 無料、macOSに内蔵。画面上の何でもサンプリングできて素晴らしいですが、デフォルトが妙なカラースペースで、HEXへのコピーの流れが煩雑です（設定を掘らないといけない）。Windows版なし。
- Chrome DevTools のスポイト — 無料、すでにブラウザにあります。スタイルペインを開いて、カラースウォッチをクリックし、スポイトを押す。よく動きますが、開発ツールに埋もれていて、レンダリングされたページしかサンプリングできません。
- Photoshop（約$23/月）— スポイトは優秀で精密ですが、1画素を読むために月$20超のアプリを起動するのは過剰です。
- ブラウザのカラーピッカー拡張機能 — 便利ですが、ここがトレードオフです: どのページでもスポイトできる拡張機能は、たいていあなたが訪れるすべてのページを読み取る許可を求めます。カラーピッカーにしては多くを信頼することになります。僕なら、バックグラウンドの拡張機能に丸ごとの読み取り権限を渡すより、何もアップロードしないタブにファイルを落とすほうを選びます。
よくある質問
スクリーンショットからHEXコードを取得するには? スクリーンショットを撮って、ToolKoalaのようなブラウザのカラーピッカーに落とし、欲しい画素をクリックします。画像をアップロードせずに、HEXとRGBが即座に手に入ります。
HEXとRGBの違いは?
同じ色を表します。HEX（#3B82F6）はCSSやデザインツールで使われるコンパクトな6桁の形式、RGB（59, 130, 246）は赤/緑/青のチャンネルを数値で並べたものです。ほとんどのツールは、これも含めて両方を出します。
ファイルではなく、ライブのWebサイトから色を取れる?
はい——画面上のサンプリングには、Chrome DevToolsのスポイトか、ブラウザのネイティブ EyeDropper APIを使いましょう。すでに持っている画像ファイルからサンプリングするなら、アップロード不要のカラーピッカーのほうが手軽です。
正確に1画素まで合っている? はい、オリジナル画像をサンプリングする限りは。画像が圧縮されていたり（重いJPG）拡大縮小されていたりすると、見えている色がすでに元からわずかにずれていることがあります——それはファイルのせいで、ピッカーのせいではありません。
— Milo 🐨