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

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

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

本記事の内容

  • 使用されている色を調べる方法が分かる。
  • Windows、Macそれぞれに適したツールが分かる。

この記事を書いている私は、業界歴10年ほどのシステムエンジニアのサラリーマンブロガーです。本記事では、Webサイトで使われている色の調べ方をご紹介します。

ブログのデザインを検討中の方に特におすすめです。ぜひご覧ください。

広告

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

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

  • 方法①:Chromeの「拡張」機能を利用した方法(Win、Mac共通)
  • 方法②:PhotoScape Xを利用した方法(Win、Mac共通)
  • 方法③:SnapCrabを利用した方法(Winのみ)
  • 方法④:Windowsのペイントを利用した方法(Winのみ)

方法①:Chromeの「拡張」機能を利用した方法(Win、Mac共通)

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

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

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

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

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

使い方

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

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

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

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

方法②:PhotoScape Xを利用した方法(Win、Mac共通)

※ツールのインストールについては、こちらの記事を参照ください。画像に余白を追加する方法【PhotoScapeで簡単設定】

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

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

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

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

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

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

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

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

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

方法③:SnapCrabを利用した方法(Winのみ)

まずはインストールからですが、手順については別記事を参照ください。【仕事効率化】Windowsのキャプチャツール【SnapCrab】

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

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

方法④:Windowsのペイントを利用した方法(Winのみ)

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

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

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

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

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

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

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

注意点

ここでの表示はカラーコードではないので、カラーコードに変換したい場合にはカラーコードに変換するサイトを利用すると便利です。
https://www.peko-step.com/tool/tfcolor.html

=====

今回は以上です。

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

広告