パソコン画面上のカラーコードを取得する方法

HTMLとCSSでは、カラーコードで色が識別されています。WebページなどのHTMLプロジェクトを作成していて、パソコン画面上の画像やWebサイト、ウィンドウの特定の色に一致する要素を記述したい場合は、その色のカラーコードを調べなければなりません。この記事では、さまざまな無料ツールを使って任意の色のカラーコードをすばやく識別する方法を紹介します。

方法 1

方法 1 の 4:

「DigitalColor Meter」を使う（Mac）

PDF形式でダウンロード

「DigitalColor Meter」はmacOSに付属しているツールで、画面上の任意の色のカラー値を識別することができます。^{[1]X出典文献}「Finder」を開いてアプリケーションフォルダをダブルクリックし、ユーティリティフォルダをダブルクリックしたら、DigitalColor Meterをダブルクリックして起動しましょう。
2
識別したい色にマウスカーソルを合わせる　マウスを動かすと、ツール内のカラー値がリアルタイムで更新されます。水平方向と垂直方向の絞りの両方をロック（固定）するまでは、この位置からマウスを動かさないようにしましょう。
- また、このツールを使ってWeb上の色を識別することも可能で、「Safari」（または任意のWebブラウザ）を開き、識別したい色が使われているWebサイトにアクセスするだけです。
を押す　水平方向と垂直方向の絞りの両方がロックされ、マウスを動かしてもカラー値は変わらなくなります。
を押して、カラーコードをクリップボードにコピーする　また、カラーメニューをクリックし、カラーをテキストでコピーを選択して、カラーコードをコピーすることも可能です。
を押して、コピーしたコードを貼り付ける　HTMLコードやテキストファイルなどの入力領域に直接貼り付けることができます。
を押して、絞りのロックを解除する　別の色を識別したい場合は、これでロックが解除され、カーソルでカラー値を再び識別できるようになります。
広告

方法 2

方法 2 の 4:

「Color Cop」を使う（Windows）

PDF形式でダウンロード

1
「Color Cop」をインストールする　「Color Cop」は、画面上の任意の色のカラーコードをすばやく識別するのに使える簡単な無料ユーティリティです。アプリの入手方法は以下の通りです。
- Webブラウザからhttp://colorcop.net/download（英語のみ）にアクセスします。
- 「self-installing（セルフインストール）」の下のcolorcop-setup.exeをクリックします。ファイルが自動的にダウンロードされない場合は、保存またはOKをクリックしてダウンロードを開始しましょう。
- ダウンロードしたファイルをダブルクリックします（ダウンロードフォルダにありますが、通常はブラウザタブの左下にも表示されます）。
- 画面の指示に従って、アプリケーションをインストールします。
「スタート」メニューにあります。
他のアプリケーションやWebサイトを含め、画面上の任意の色を識別することができます。
コードは、アプリケーションの中央にある空欄に表示されます。
カラーコードがクリップボードにコピーされます。
「Ctrl + V」を押せば、HTMLやCSSコードなどの任意の場所にカラーコードを貼り付けることができます。
広告

方法 3

方法 3 の 4:

「Imagecolorpicker.com」を使う

PDF形式でダウンロード

パソコンやスマートフォン、タブレットでhttps://imagecolorpicker.com（英語のみ）にアクセスする　この無料ツールを使って、アップロードした画像内の任意の色のカラーコードを識別することができます。この方法は、AndroidやiPhone、iPadを含むどのWebブラウザでも用いることが可能です。
2
画像をアップロードするか、URLを入力する　自分の画像をアップロードするか、すでにインターネット上にある画像やWebサイトを使うかを決めなければなりません。どちらの方法でも画像やWebページを表示させて、任意の色を選択することができます。　
- 画像をアップロードするには、下にスクロールしてUpload your image（自分の画像をアップロード）を選択し、パソコンやスマートフォン、タブレット内の画像にアクセスして、その画像をアップロードするオプションを選択します。
- Webサイトを使うには、「Use this box to get the HTML color code from a website（このテキストボックスを使って、WebサイトからHTMLカラーコードを取得する）」というオプションまで下にスクロールし、URLを入力して、Take website（Webサイトを取得）をクリックまたはタップします。
- Webサイト全体ではなく、Web上の画像を直接選択するには、「Use this box to get the HTML color code from a picture via this url（このテキストボックスを使って、このURL経由で画像からHTMLカラーコードを取得する）」のテキストボックスに画像のURLを入力して、Take image（画像を取得）をクリックまたはタップします。
カラーコードが画面左下に表示されます。
コピーアイコンをクリックまたはタップして、カラーコードをクリップボードにコピーする　カラーコードの右側にある正方形が2枚重なったアイコンのことです。クリップボードにコピーしたコードは、任意のテキストファイルや入力領域に貼り付けることができます。
広告

方法 4

方法 4 の 4:

「Firefox」を使う（Web上の色の場合）

PDF形式でダウンロード

1
WindowsまたはMacで「Firefox」を起動する　「Firefox」というWebブラウザには、Web上の任意の色のカラーコードを識別するのに使える無料のスポイトツールが付属しています。「Firefox」を使っている場合は、「スタート」メニュー（Windows）または「アプリケーション」フォルダ（macOS）にあります。
- 「Firefox」は、https://www.mozilla.org/ja/firefox/から無料でダウンロード可能です。
- 「Firefox」では、Webサイト上の色の値しかわからず、ブラウザ以外では使えません。
必要な要素の色が表示されていることを確認しましょう。
「Firefox」の右上にある横三本線のことです。
メニューをクリックする　別のメニューが展開されます。
をクリックする　マウスカーソルが大きな円に変わります。
マウスカーソルをその位置に移動させると、カラーコードがリアルタイムで更新され、マウスをクリックすると、そのカラーコードがクリップボードに保存されます。
「Control + V」（Windows）またはCommand + V（Mac）を押せば、カラーコードをHTMLやCSSなどのテキストファイルに貼り付けることができます。
広告

ポイント

他のWebサイトやブラウザ拡張機能、画像編集ソフトでも、カラーピッカーを使って色相のカラーコードを識別できるものがあります。
識別しようとしている色のWebページを誰が作成したかわかっている場合は、どのカラーコードを使ったのか気軽に聞いてもよいでしょう。また、Webサイトのソースコードを調べて、そこに記載されているカラーコードを確認することも可能です。