カラーピッカーを使用して任意のピクセルから色を見つける方法
簡単な回答
色を選択するには: カラー ピッカーを開き、画像をアップロードし (または画面のスポイトを使用し)、目的の色のピクセルをクリックすると、HEX、RGB、および HSL の値が表示されます。すべての処理はローカルで行われ、画像がアップロードされることはありません。
導入
カラー ピッカー (スポイトとも呼ばれます) を使用すると、ピクセルの正確な色を見つけることができます。これは、ブランドのカラーを一致させたり、画像からカラーをサンプリングしたり、写真からカラー パレットを構築したりする場合に不可欠です。ブラウザベースのカラー ピッカーは、Canvas API を使用してアップロードされた画像から色を読み取ることができ、ブラウザの組み込み EyeDropper API は画面上のどこからでも色を選択できます。このガイドでは、ブラウザでカラー ピッカーを使用する方法を説明します。
ステップバイステップ
-
カラーピッカーツールを開く
カラーピッカーツールページに移動します。このツールは、アップロードされた画像からの色選択をサポートしており、サポートされているブラウザでは、EyeDropper API を介して画面上のどこからでも色を選択できます。
-
ソースを選択してください
画像から選択するには: 画像をアップロードするか、ドラッグ アンド ドロップします。画面から選択するには (Chrome/Edge のみ): [画面から選択] ボタンをクリックし、画面上の任意の場所をクリックします。
-
サンプルするピクセルをクリックします
画像を選択するには、画像上にカーソルを移動し、目的の色のピクセルをクリックします。このツールは、getImageData() を使用してキャンバスからピクセル カラーを読み取ります。拡大鏡を使用すると、正確なピクセルを選択できる場合があります。
-
カラー値を読み取る
このツールは、選択した色を HEX、RGB、HSL 形式で色見本とともに表示します。カーソルを移動すると、値が即座に更新されます。
-
色をコピーする
任意の形式の横にある [コピー] をクリックして、色の値をクリップボードにコピーします。 CSS、デザイン ツール、またはアプリケーションで使用してください。
例
ロゴからブランドカラーを選ぶ
入力: logo.png、ブランドカラーのピクセルをクリックします
出力: HEX: #1a73e8, RGB: rgb(26, 115, 232), HSL: hsl(217, 89%, 51%)
写真から色のサンプルを作成する
入力: photo.jpg、空のピクセルをクリックします
出力: HEX: #87ceeb、RGB: rgb(135, 206, 235)、HSL: hsl(197, 71%, 73%)
画面から選択 (Chrome/Edge)
入力: 「画面から選択」をクリックし、ディスプレイ上の任意のピクセルをクリックします。
出力: そのピクセルの HEX 値 (例: #ff5733)
よくある問題
- アンチエイリアスはエッジの色をブレンドします。2 つの色の間のエッジのピクセルがブレンドされます。正確さを期すため、単色領域の中心からサンプルを採取します。
- EyeDropper API はサポートされていません。スクリーン ピッカーには Chrome 95 以降または Edge 95 以降が必要です。 Firefox と Safari はこれをサポートしていません。代わりに画像アップロード方法を使用してください。
- JPEG 圧縮により色が変更される — JPEG 非可逆圧縮により、ピクセルの色がわずかに変更されます。正確なブランドカラーを得るには、PNG または元のベクター ソースを使用してください。
- カラー プロファイルの違い - カラー プロファイル (ICC) が埋め込まれた画像は、生のピクセル値が示すものとは異なって表示される場合があります。
ヒント
- 拡大鏡を使用して正確なピクセルを選択します。高ズームでは、ブレンドされたエッジではなく、単一の正確なピクセルを選択できます。
- 圧縮によってノイズが生じた場合は、ベタ領域から複数のピクセルをサンプリングし、平均化します。これにより、より代表的な色が得られます。
- EyeDropper API (Chrome/Edge) を使用して、ブラウザ内の画像だけでなく、あらゆるアプリケーションから色を選択します。
- カラー ピッカーを使用すると、プライベートなカラー サンプリングを瞬時に行うことができます。画像がブラウザから離れることはありません。