画像カラーピッカー

画像をここにアップロードまたは貼り付け、取得したいピクセルをクリックするだけです。ツールはHTMLキャンバスを通じてピクセルを読み取り、HEX・RGB・HSLの値を即座に表示し、HEXコードをクリップボードに自動コピーします。拡大ルーペはカーソル周辺のピクセルを表示するため、ちょうど欲しいピクセルを正確に選べます。サーバーへのアップロードは一切なく、HTML5のキャンバスAPIを使用してすべてブラウザ内で動作します。即時処理・プライバシー保護・ページ読み込み後はオフライン利用も可能です。アンチエイリアス処理されたテキストやロゴのエッジなどクリックしにくい箇所は、ブラウザの拡大機能を使って先にズームインしてからクリックしてください。

この無料のブラウザベーススポイトツールを使用してください。画像をドロップし、ピクセルをクリックしてコードをコピーするだけです。インストール不要・サインアップ不要です。Adobe PhotoshopやIllustratorは月額約3,000円〜かかりますが、このツールは完全無料です。macOSのデジタルカラーメーターやWindows PowerToysのカラーピッカーとは異なり、画像のドミナントパレットも自動抽出するため、一つひとつクリックしなくてもメインカラーを一度に取得できます。imagecolorpicker.comは最も人気の専用代替ツールですが、ファイルをサーバーにアップロードします。このツールはアップロードしません。

どちらも同じ色を異なる方法で表現します。HEXは赤・緑・青を3組の16進数ペアで表し（例：#FF5733）、CSSやWebデザインで標準的に使用されます。RGBは3つの0〜255の10進数で表します（例：rgb(255, 87, 51)）。画像編集ソフトやコードでよく使われます。相互変換は情報の損失なく行えます。このツールはクリックしたすべてのピクセルについて両方を表示します。CSSやTailwindクラスを書くときはHEX、キャンバス・WebGL・数値チャンネルを扱う画像処理コードではRGBを使用するのが一般的です。どちらの形式も同じsRGBカラーポイントを表します。

HSLは色を色相（Hue、0〜360°）・彩度（Saturation）・輝度（Lightness）で表現します。色を直感的に調整できる形式で、色相を変えずに明るくしたり彩度を下げたりできます。CSSはhsl()をネイティブでサポートしているため、デザイナーがパレットを構築する際によくHSLで作業します。輝度を上げればティント（薄い色）、下げればシェード（暗い色）になります。このピッカーはすべてのピクセルに対してHEX・RGB・HSLを表示するため、ワークフローに合わせて必要な形式をコピーできます。Figma・Sketch・Adobe XDへの貼り付けには通常HEXが最も手軽で、TailwindやCSSカスタムプロパティにはHEXまたはHSLどちらも適しています。

写真を読み込むだけでドミナントパレットが自動的に表示されます。ツールは画像のピクセルをクラスターに量子化して頻度順にランク付けし、最も支配的な8色をHEXコード付きスウォッチとして返します。スウォッチをクリックすればコピーでき、「すべてコピー」でパレット全体をまとめて取得できます。Adobe ColorやCanvaのパレットジェネレーターも同様の機能を持ちますがアカウントが必要で、Coolors.coは画像からパレットを生成できますが画像をサーバーに送信します。このツールのパレット抽出はすべてブラウザ内で完結し、アップロードなし・アカウント不要・広告なしでご利用いただけます。

ブラウザ内のHTMLキャンバス要素に画像が描画され、クリックするとgetImageData APIを通じてピクセルの赤・緑・青の値が読み取られ、HEX・RGB・HSLに変換されます。キャンバスはローカルで動作するため、サーバーは一切関与しません。拡大ルーペは2つ目のキャンバス要素を使用してカーソル周辺のピクセル領域をズーム表示します。アンチエイリアス処理されたテキスト・ロゴのエッジ・写真のグラデーションなど細かいディテールを持つ画像でも、正確なピクセルを選択できます。

このツールでは安全です。画像はブラウザのメモリにのみ読み込まれ、どこにも送信されません。ブラウザのネットワークタブで確認できます。ページ読み込み後はリクエストが一切発生しません。未公開のデザイン・クライアントのロゴ・プライベートな写真を扱う際にも重要な点です。imagecolorpicker.comや一部のCanva機能を含む多くのアップロードベースのピッカーは、ファイルをサーバーに送信して一時保存します。このツールはすべてローカルで処理するため、ファイルはデバイス上に留まり、タブを閉じれば消えます。

はい。「スクリーンから選択」ボタンはEyeDropper API（ChromeおよびEdge対応）を使用して、他のウィンドウ・アプリ・ブラウザのタブを含む画面上の任意のピクセルをサンプリングできます。取得した色は、画像からのピックと同じHEX/RGB/HSLパネルと履歴に追加されます。APIに対応していないブラウザ（Safari・Firefox）では、PrtSc（MacはCmd+Shift+4）でスクリーンショットを撮り、ファイルを保存せずにCtrl+Vでこのページに直接貼り付けてください。動画フレーム・ブラウザで開いたPDF・ライブWebページのサンプリングにも同様の方法が使えます。

ロゴを保存またはスクリーンショットしてここにドロップし、ブランドカラーをクリックしてHEXをコピーしてください。または、スクリーンスポイトボタンを使用して別のタブで開いているライブWebサイトを直接サンプリングすれば、スクリーンショット不要です。CSSプロパティではなくSVGや画像アセットに色が埋め込まれている場合は、ブラウザのデベロッパーツールでスタイルを確認するよりも速く取得できます。ピック履歴には直近16色が保存されるため、デザインツールに切り替える前に複数のソースからブランドカラーを一括収集できます。

使いやすいパレットは通常3〜6色で構成されます。メインカラー1色・サブカラー1〜2色・アクセントカラーの組み合わせです。抽出機能は8色のドミナントスウォッチを返すため、最も適したものを選べます。個別のスウォッチをコピーするか、ムードボード用にすべて取得してください。実際には4色が確実な出発点です。プライマリー・セカンダリー・ニュートラル・アクセントの4色構成です。StripeやLinearのような企業のデザインシステムでは、多くの異なる色を使うのではなく、同じ色相の輝度や彩度のバリエーションを多数持つコンパクトなパレットを採用しています。

CSSやWeb作業にはHEX（コードベースとデザインツールで最も一般的）、スクリーンやキャンバスコードにはRGB/RGBA、パレット構築と系統的な調整にはHSL、印刷出力にはCMYKを使用します。Figma・Sketch・Adobe XDはいずれもHEX・RGB・HSLに対応しています。このピッカーはクリックしたすべてのピクセルのHEX・RGB・HSLを表示するため、手動変換なしにワークフローに必要な形式をコピーできます。印刷用にCMYKも必要な場合は、HEXを無料のオンラインコンバーターに貼り付けてください。キャンバスAPIはネイティブでCMYKを出力しません。

ピクセルをクリックすると、そのHEXが自動的にクリップボードにコピーされます。すべての値の行・履歴スウォッチ・パレットチップもクリックでコピー可能です。値またはスウォッチをクリックするだけでコピーされます。ピック履歴には直近16色が保存されるため、別の画像に切り替える前に1枚の画像から複数の色合いを順番に収集できます。スウォッチにカーソルを合わせるとクリック前に値を確認できます。パレット全体をリストとして必要な場合は、「すべてコピー」で8つのHEXコードをカンマ区切りで取得でき、CSS変数やデザインドキュメントに貼り付けるだけです。

はい。Ctrl+Vでフレームやページのスクリーンショットをピッカーに直接貼り付けるか（ファイル保存不要）、PDFや動画再生中にスクリーンスポイトを使って直接サンプリングしてください。ブラウザで開いているPDFには、スクリーンスポイットが最も手軽です。ChromeでPDFを開き、「スクリーンから選択」をクリックして、欲しい色をクリックするだけです。動画の場合は、正確なサンプリングのために先にフレームを一時停止してください。

ブラウザは画像レンダリング時にカラープロファイル（ICC）変換を適用する場合があり、スクリーンショットはディスプレイのカラープロファイルを継承します。このピッカーはブラウザによってレンダリングされた実際のsRGBピクセル値を報告します。これはCSS用として正しい値です。PhotoshopやFigmaとの間に差異がある場合は、ディスプレイがsRGBに調整されているか、画像ファイルに一致する埋め込みカラープロファイルがあるかを確認してください。ロゴ素材については、デザイナーが抽出に頼らず直接ブランドのHEX値を提供するのが理想的です。

imagecolorpicker.comは最も多く使われている代替ツールで、単一ピクセルピッキングとパレット抽出を提供しますが、画像をサーバーにアップロードして広告が表示されます。Adobe Colorは写真からパレットを抽出できますが、Adobeアカウントが必要で画像がAdobeのサーバーに送信され、ズームルーペ付きの単一ピクセルピッキングは提供されていません。パレットツールであり、スポイトツールではありません。CanvaのカラーピッカーはCanvaエディター内の画像にしか使用できません。macOSのデジタルカラーメーターとWindows PowerToysのカラーピッカーはスクリーンサンプリングに使えますが、ファイルからのパレット抽出はできません。このツールはズームルーペ・スクリーンスポイト・16色履歴・パレット抽出をすべて組み合わせた唯一の完全クライアントサイド・無料・アカウント不要・広告なしのオプションです。