画像内のピクセルの色を見つける方法

← すべてのブログ記事

ガイドを更新しました:

画像内の色を検査し、表示されたカラーコードをコピーします。

ツール名の下にある「このツールの使用方法」リンクを使用してこのガイドを開きます。コンピューターと携帯電話の手順、スクリーンショット、ビデオが含まれています。

ツールを開く →

始める前に

再現可能なファイルの色が必要な場合は、カラー管理されたプレビューのスクリーンショットではなく、ソース イメージを使用します。

デモファイルを試してみる — landscape.png

これらの小さなファイルはこのガイド用に作成されたものであり、個人データは含まれません。

段階的な説明

  1. 画像を選択し、カラーピッカーのプレビューが表示されるまで待ちます。
  2. 必要な色の領域上でピッカーを移動またはタップします。
  3. 選択したサンプルと表示されるカラー値を確認します。
  4. 提供された HEX または他の色表現を、表記をそのままにしてコピーします。
  5. 値をエディタに貼り付け、ソース画像の目的の領域と比較します。

コンピュータ上で

ポインタと利用可能なズーム コントロールを使用して正確な領域を選択し、カラー値をエディタにコピーします。

電話で

画像内をタップし、選択した色のプレビューを確認します。対象領域が小さい場合は、慎重にページを拡大または再配置してください。

iPhone の Safari で、共有メニューを開き、結果が新しいタブで開いた場合は、[ファイルに保存] を選択します。 Android Chrome で、「ダウンロード」を確認します。処理が完了するまで、このタブを開いたままにしておきます。

より良い結果を得るために

エッジや圧縮アーティファクトから離れた均一な領域を選択します。隣接するピクセルの値はわずかに異なる場合があります。

スクリーンショットとビデオ

デスクトップデモ

録音では英語のインターフェイスが表示されます。上記の翻訳された手順に従ってください。コントロールは同じ順序です。 この記録は、ツールでのデモ入力とその結果の出力を示しています。

デスクトップデモ
画像内のピクセルの色を見つける方法 — ツール名の下にあるガイド リンク (コンピュータ上で)
ツール名の下にあるガイド リンク
画像内のピクセルの色を見つける方法 — ソースの選択 (コンピュータ上で)
ソースの選択
画像内のピクセルの色を見つける方法 — 結果の検査 (コンピュータ上で)
結果の検査

電話デモンストレーション

録音では英語のインターフェイスが表示されます。上記の翻訳された手順に従ってください。コントロールは同じ順序です。 この記録は、ツールでのデモ入力とその結果の出力を示しています。

電話デモンストレーション
画像内のピクセルの色を見つける方法 — ツール名の下にあるガイド リンク (電話で)
ツール名の下にあるガイド リンク
画像内のピクセルの色を見つける方法 — ソースの選択 (電話で)
ソースの選択
画像内のピクセルの色を見つける方法 — 結果の検査 (電話で)
結果の検査

質問とトラブルシューティング

隣接するピクセルが異なるのはなぜですか?

アンチエイリアス、グラデーション、JPEG 圧縮、およびテクスチャはすべて、小さな色の変化を生成する可能性があります。

別の画面では色が違って見えるのはなぜですか?

ディスプレイ設定、カラープロファイル、周囲の色は外観に影響します。コピーした数値は表示調整ではありません。

サービスが過負荷になっているというメッセージが表示された場合は、しばらく待ってからもう一度試してください。試行が失敗しても、ソース ファイルが変更されたわけではありません。

ツールを開く →