【超便利】Webサイトの色（カラーコード）を調べる方法【ColorPick Eyedropper】

Webサイトでよく綺麗なデザインを見かけるのでマネしようと思ったのですが、カラーコードが分かりませんでした。

カラーコードを調べる方法などはありますか？

ゆーさく

このような疑問を解決します！

カラーコードとは？

カラーコードとはWebページの記述などに用いるHTMLやCSSの色指定に使われる符号です。

僕もブログの記事を書く上で色を知りたい機会が頻繁にあるので

とてもお世話になっています

ゆーさく

Chorome拡張機能：「ColorPick Eyedropper」のダウンロード方法

「ColorPick Eyedropper」はカーソルを対象に合わせるだけで簡単にカラーコードを調べることができる便利な拡張機能です。

まずColorPick Eyedropperをダウンロードします。

「chromeに追加」を押すろ下のようなポップアップが表示されるので、

もう一度「拡張機能を追加」を押します。

拡張機能をインストール出来たら右上にあるツールバーを開きます。

そして使いやすいようにピンのマークを押して「ピン止め」しておきましょう。

「ColorPick Eyedropper」の使い方

ここまでは「ColorPick Eyedropper」のダウンロード方法を紹介してきました。

ここからは使用方法を解説していきます。

①：拡張機能「ColorPick Eyedropper」をONにする

まず先ほどピン止めした「ColorPick Eyedropper」をクリックしてONにします。

②：カーソルを対象に合わせる

今回はTwitterアイコンの水色の部分の色を調べたいと思います。

Twitterアイコンの水色部分にカーソルを合わせます。

③：カラーコードをコピペする

カーソルを合わせるとカラーコードが表示されるのでカラーコードをコピ－します。

これでTwitterアイコンの水色の部分は（#55ACEE）という事が分かりました。