コンピュータ画面上の色を識別する方法

デジタル世界は、私たちの周りの色を文字と数字の単純な組み合わせに変換します。好きな色を取得するには、そのコードを取得するだけで、それを複製できます。

ウェブを閲覧しているときに特定の色が目に留まりましたか? それとも、一貫性を保つためにデザインに特定の色合いを使用する必要がありますか? 画面上の任意のピクセルの RGB または HEX コードを取得する方法は次のとおりです。

画面上の色の RGB または HEX 値を識別する

画面上の色の RGB 値または HEX 値を識別するのに、専門家の目や高価なツールは必要ありません。PC では、カラーコードを取得する簡単な方法が複数あります。

PCアプリを使う

画面から色を取得する最初の方法は、コンピューター アプリを使用することです。このアプリはすでに PC にインストールされている可能性があります。

Windows用インスタントスポイト

カラーコードを頻繁に取得する必要がある場合は、シンプルなツールを手元に用意しておくと作業が楽になります。Instant Eyedropper は、現時点では Windows 専用の無料アプリです。

インストールすると、システム トレイからアクセスできるようになります。選択した色の上でマウスの左ボタンを押したままにして、放すだけです。アプリは即座にカラーコードをクリップボードにコピーし、それを任意のプログラムに貼り付けることができます。インスタント スポイトはWindows XP-10 で動作します。

Mac用デジタルカラーメーター

Digital Color Meter は、Mac デバイスにプレインストールされている同様のツールです。「アプリケーション」フォルダーを開き、「ユーティリティ」を見つけます。デジタル カラー メーター ツールはすぐそこにあるはずです。

このアプリを実行すると、カーソルがスポイトに変わり、画面から任意の色を選択できるようになります。アプリはデフォルトで RGB 値を表示します。これらをコピーして後で HEX に変換したり、オプションを微調整して必要な色を正確に取得したりできます。

Mac 用 SIP

より高度なツールが必要な場合は、Mac で利用できる SIP を検討してください。SIP は単なるカラーピッカーではありません。また、Web デザイナーなら誰でも気に入る高度な機能が多数提供されます。色を簡単に編集し、パレットに整理し、ニーズに合わせて形式を変更できます。

残念ながら、SIP は無料のツールではありませんが、無料トライアルを提供しています。追加機能がお金を払う価値があるかどうかを確認するために試してみてください。

これらのデスクトップ アプリの利点は、画面のほぼすべての部分から色を取得できることです。以下のブラウザ ツールは、Web ページ内でのみこれを行うことができます。もちろん、写真またはスクリーンショットをアップロードしてブラウザで表示することで、この制限を回避できます。

ブラウザを使用する

RGB または HEX コードの色を取得する次の簡単な方法は、ブラウザの組み込みツールを使用するだけです。手元の Web ページから色を選択することしかできませんが、これには Firefox と Chrome の両方を使用できます。

Firefox のカラーピッカー ツールは次の場所にあります。

1. Firefox を起動し、カラーコードを抽出したい Web サイトを開きます。
   
2. ブラウザの右上隅にあるメニュー (3 本の水平線) をクリックします。
   
3. オプションの中から Web 開発者ツールを見つけます。「その他のツール」の下にある可能性があります。
   
   
4. ページの下部にウィンドウが開きます。スポイト アイコンを見つけると、クリックするだけでカラー コードをコピーできます。
   

Chrome でも手順は似ています。

1. Chrome を起動し、目的の Web サイトを開きます。
   
   
2. 右上隅にあるメニュー (縦に 3 つの点) をクリックし、「その他のツール」の下にある「開発者ツール」を見つけます。
   
3. ページの右側にウィンドウが開きます。2 番目のセクションで「スタイル」を見つけてクリックします。
   
4. 「body」の下に、たくさんのカラーボックスが表示されます。それらのいずれかをクリックすると、カラー ピッカーがアクティブになります。
   

ヒント: いずれかのページを右クリックして「検査」を選択すると、両方のブラウザで開発者ツールを開くこともできます。

ブラウザ拡張機能を使用する

開発者ツール以外にも、便利なブラウザ拡張機能を使用して、Web ページから任意の色を選択することもできます。すべて機能する次の拡張機能をチェックしてください。

• カラージラ
  
• カラーピックスポイト
  
• スポイト
  

ウェブサイトを利用する

色の RGB または HEX コードを識別するためにアプリや拡張機能は必ずしも必要ありません。色を取得したい特定の画像がある場合は、Web サイトを使用することもできます。無数の Web サイトで、写真をアップロードしたり、カラー コードを抽出したり、調和のとれたパレットを生成したりすることができます。

PineTools 画像カラーピッカー

PineTools Web サイトでイメージ カラー ピッカー ツールを見つけて、イメージをアップロードします。必要に応じてズームインして、取得するピクセルを見つけます。クリックするだけで、RGB 値と 16 進数コードを取得できます。

画像カラーピッカー

Image Color Picker Web サイトでは、画像のアップロード以外にもいくつかのオプションが提供されています。「Use Your Image」をクリックし、画像をインポートする場所を選択します。画像の任意の部分をクリックして特定の色を選択できますが、Web サイトでは画像に基づいてカラー パレットも提案されます。

イメージカラーファインダー

Image Color Finder は、単純なカラー ピッカー以外に、クリエイティブ ツールとしても機能します。アップロードされた画像をピクセル化して色の概要をわかりやすくしたり、必要なだけズームインしたりできます。このサイトでは、いくつかの色も自動的に提案されます。

スクリーンショットを撮る

最後に、上記のツールをすべて使用しなくても、カラーコードを識別できます。代わりに、スクリーンショットを撮り、そこから色を選択します。

1. 選択したい色が画面に表示されていることを確認してください。
2. Windows ではキーボードの Print Screen ボタン (PrntScr、PrtScn など) を押すか、Mac では「Shift + Command + 3」を同時に押して、スクリーンショットを撮ります。スクリーンショットはクリップボードに自動的にコピーされます。
   
   ヒント: 画面の一部だけをキャプチャすることもできます。Windows では、[スタート] メニューから Snipping Tool を開きます。Mac では、「Shift + Command + 4」ショートカットを使用します。
3. MS ペイント (またはその他の画像処理アプリ) を開き、スクリーンショットを貼り付けます。
4. スポイト ツールを見つけて色を選択します。
   
5. MSペイントのカラーパレットの横にある「色の編集」をクリックします。スライダーの下に、現在の色の RGB 値が表示されます。
   これらの数字を 16 進コードに変換するには、Web サイトの助けが必要です。
6. [RGB から 16 進数]に進み、適切なフィールドに値を入力します。
   
7. 「16 進数に変換」をクリックすると、コードが表示されます。
   

追加のよくある質問

RGB と HEX の違いは何ですか? どれが必要ですか?

RGBコードとHEXコードは同じ色を表現します。ただし、必要なコードはその用途によって異なります。RGB コードは、目的の色を生成するためにどれだけの赤、緑、青の光を放出するかを画面に指示します。HEX コードは同じ情報を送信しますが、コーディング言語が異なります。

デザイナーまたは開発者は、色の 16 進数コードを必要とする可能性が高くなります。

モバイルデバイスで色を識別するにはどうすればよいですか?

モバイル デバイスの画面から色を選択するには、アプリをダウンロードするか、上記の Web サイトのいずれかを使用します。マークアップ ツール内には、iOS 用のカラー ピッカー ツールもあります。色の 16 進数コードも得られます。

クリックするだけで、表示されている色を入手できます

RGB または HEX カラー コードを使用すると、エラーが発生する可能性がなくなります。これらのユニバーサルカラー言語のおかげで、デザインを同じ色合いで一貫性を保つことができます。画面上のカラーコードを抽出する方法はたくさんあるので、自分にとって最も簡単な方法を見つけるだけで済みます。

どのカラーピッカーツールが好みですか? それとも、別の信頼できるメソッドを追加する必要がありますか? 以下にお知らせください。