サイトで使われている色を調べる方法

Webサイトで使われている色を調べるにはどうしたらいいんだろう。いいやり方は無いかな。

この記事では上記のような疑問を解決します。

サイトで使われている色を調べる方法【おすすめツールを紹介します】

色を調べるにはいろいろな方法がありますが、今回は下記を紹介します。

方法①：Chromeの「拡張」機能を利用した方法（Win、Mac共通）

１つ目の方法として、「拡張機能」を利用した方法の紹介です。

まずは、下記のこちらのURLからダウンロードして、Chromeに機能を追加します。

下記のような画面になるので「Chromeに追加」をクリック。

次は「拡張機能を追加」をクリック。

そうすると、URLの右側に「ColorPick Eyedropper」が追加されます。

使い方

追加された「ColorPick Eyedropper」のアイコンをクリックします。

すると、下記のような状態になります。

次に、調べたい色の箇所にカーソルをあてます。すると色の情報が表示されます。

調べたい色の箇所でクリックすると、カラーコードをコピーできるようにもなります。

方法②：PhotoScape Xを利用した方法（Win、Mac共通）

※ツールのインストールについては、こちらの記事を参照ください。[orilink url="https://ttman.work/picture-margin/"]

まずは、調べたい対象となるWebページや、写真を開き、スクリーンショットを撮ります。（[Alt + Print Screen]を押すことでスクリーンショットを撮ることができます。）

そして「PhotoScape X」を起動します。起動ができたら[Ctrl + V]で貼り付けをします。

下記のようにPhotoScape Xに貼り付けができました。

次に、[道具 ー ペイント]を選択します。

「カラー」箇所をクリック。

下記のように「スポイト」マーク箇所をクリックします。

調べたい箇所をクリックします。

再度、「カラー」箇所をクリックします。

カラーコードの確認ができます。「コピー#」をクリックすることで、カラーコードのコピーも可能です。

方法③：SnapCrabを利用した方法（Winのみ）

まずはインストールからですが、手順については別記事を参照ください。[orilink url="https://ttman.work/snapcrab/"]

インストール完了後は、「SnapCrab」の「カーソル位置の色を取得」を利用します。

色を調べたい箇所にカーソルを移動すると、カラーコードが表示されます。（※残念ながら、コードの値をコピーすることはできないです。）

方法④：Windowsのペイントを利用した方法（Winのみ）

次に、Windowsのペイントを利用した方法を紹介します。

方法②と同じように、スクリーンショットを撮ります。（[Alt + Print Screen]でOK）

次に、ペイントソフトを開きます。
[スタートメニュー　－　Windowsアクセサリ　－　ペイント]を実行します。

下記のようにペイントが起動します。この状態で貼り付けを行います。（[Ctrl + V]でOKです。）

すると、下記のようにスクリーンショットを撮った内容がペイントに貼り付けされます。この状態で「スポイト」アイコンをクリックします。

スポイトの形をしたカーソルを、調べたい色の箇所にあててクリックします。

調べたい色の箇所をクリックした後は、「色の編集」をクリックすることで、色の情報を表示することができます。

注意点

=====

今回は以上です。

お役に立てれば幸いです。