コンピュータ上の色のHexコードを取得する方法

ウェブページやその他のHTMLプロジェクトを作成していて、特定の色にマッチする要素を画像、ウェブサイト、またはコンピュータ画面上のウィンドウに含めたい場合、その色の16進コードを見つける必要があります。このWikiHowでは、さまざまな無料ツールを使って、あらゆる色の16進コードをすばやく特定する方法を説明します。

方法1

Macでデジタルカラーメーターを使う

1. MacでDigital Color Meterを開きます。macOSに付属しているこのツールは、画面上のあらゆる色の色値を識別することができます。 Finderを開き、アプリケーションフォルダをダブルクリックし、ユーティリティフォルダをダブルクリックし、デジタルカラーメーターをダブルクリックして開きます。
2. 識別したい色にマウスカーソルを移動します。マウスを動かすと、ツールの値がリアルタイムで更新されます。水平と垂直の両方の開口部をロックするまで、この位置からマウスを動かさないでください。

   • このツールを使ってウェブ上の色を識別することもできます。Safari（またはお好みのブラウザ）を開き、識別したい色を含むウェブサイトに移動します。
3. Command+L を押します。これで水平と垂直のアパーチャがロックされ、マウスを動かしても色の値は変わりません。
4. ⇧ Shift+⌘ Command+Cを押して16進コードをクリップボードにコピーします。Colorメニューをクリックし、Copy Color as Textを選択しても16進コードをコピーできます。
5. コピーしたコードを貼り付けるには ⌘ Command+V を押してください。HTMLコード、テキストファイル、その他の入力エリアに直接貼り付けることができます。
6. Command+L を押してアパーチャーのロックを解除します。別の色を識別したい場合、この操作でロックが解除され、カーソルが再びカラー値識別として機能します。

方法2

Windows版Color Copを使用する

1. Color Copをインストールします。Color Copは、画面上の任意の色の16進コードをすばやく識別するために使用できる、小さな無料のユーティリティです。アプリの入手方法は以下の通り：

   • ウェブブラウザにアクセスします。
   • "セルフインストール "の下にあるcolorcop-setup.exeをクリックする。ファイルが自動的にダウンロードされない場合は、「保存」または「OK」をクリックしてダウンロードを開始する。
   • ダウンロードしたファイルをダブルクリックします（ダウンロードフォルダにあり、通常はブラウザタブの左下にあります）。
   • 画面の指示に従ってアプリケーションをインストールします。
2. Color Copを開きます。スタートメニューにあります。
3. スポイトアイコンを識別したい色にドラッグします。他のアプリケーションやウェブサイト上の色を含め、画面上のあらゆる色を識別できます。
4. マウスボタンを放すと、16進コードが表示されます。アプリケーション中央の空白にコードが表示されます。
5. 16進コードをダブルクリックし、Ctrl+Cを押します。これで16進コードがクリップボードにコピーされます。
6. 必要な場所にコードを貼り付けます。HTMLやCSSコードの中など、好きな場所にCtrl+Vで16進コードを貼り付けることができます。

方法3

Imagecolorpicker.comを使用する

1. パソコン、携帯電話、タブレットのいずれかにアクセスします。この無料ツールを使って、アップロードされた画像の任意の色の16進コードを特定することができます。この方法は、Android、iPhone、iPadを含む、どのウェブブラウザでも動作します。
2. 画像をアップロードするか、URLを入力する。自分の画像をアップロードするか、すでにオンライン上にある画像やウェブサイトを使用するかを決める必要があります。どちらの方法でも、画像またはウェブページを表示し、希望の色を選択することができます。

   • 画像をアップロードするには、下にスクロールして「画像をアップロードする」を選択し、コンピュータ、携帯電話、またはタブレット上の画像に移動し、それをアップロードするオプションを選択します。
   • ウェブサイトを使用するには、下にスクロールして「このボックスを使ってウェブサイトからHTMLカラーコードを取得する」オプションを選択し、URLを入力して、「ウェブサイトを取得」をクリックまたはタップします。
   • ウェブサイト全体ではなく、ウェブ上の画像を直接選択するには、「このボックスを使用して、このURL経由で画像からHTMLカラーコードを取得する」ボックスに画像のURLを入力し、「画像を取得」をクリックまたはタップします。
3. 画像/サイトのプレビュー内で、希望の色をクリックまたはタップします。画面左下に16進コードが表示されます。
4. コピーアイコンをクリックまたはタップして、16進コードをクリップボードにコピーします。16進コードの右側にある2つの四角が重なった部分です。その後、テキストファイルや入力エリアに貼り付けることができます。

方法4

Firefoxを使う（ウェブ上の色の場合）

1. PCまたはMacでFirefoxを開く。Firefoxウェブブラウザには、ウェブ上のあらゆる色の16進コードを特定するために使用できる無料のスポイトツールが付属しています。Firefoxがあれば、スタートメニュー（Windows）またはアプリケーションフォルダ（macOS）にあります。

   • Firefoxは.NETから無料でダウンロードできる。
   • Firefoxが教えてくれるのは、ウェブサイト上の色の値だけです。ブラウザの外では使えません。
2. 識別したい色を含むウェブサイトにアクセスします。色が必要な要素が表示されていることを確認します。
3. メニュー☰をクリックします。Firefoxの右上にある3本の横線です。
4. Web Developerメニューをクリックします。別のメニューが展開されます。
5. スポイトをクリックします。マウスカーソルが大きな円に変わります。
6. 識別したい色をクリックします。マウスをその場所に移動させると、色の16進数値がライブで更新されるのがわかります。マウスをクリックすると、Firefoxが16進コードをクリップボードに保存します。
7. そのコードを必要な場所に貼り付けます。Control + V（PC）またはCommand + V（Mac）を使って、16進コードをHTMLやCSS、その他のテキストファイルに貼り付けることができます。

この記事は、CC BY-NC-SAの下で公開された " How to Get the Hex Code of a Color on Your Computer Screen " を改変して作成しました。特に断りのない限り、CC BY-NC-SAの下で利用可能です。