1. まとめトップ

WEBサイトから気になる色のカラーコードを抽出する方法

GoogleChrome「グーグルクローム」の拡張機能を使って、気になるWEBサイトに使われている色の「カラーコード」を簡単に抽出できます。

更新日: 2017年05月31日

1 お気に入り 125 view
お気に入り追加

この記事は私がまとめました

meruchakoさん

GoogleChromeの拡張機能「ColorPick Eyedropper」でWEBサイトからカラーコードを抽出!

【手順①】Chromeから「ColorPick Eyedropper」をダウンロード

左画像のように、Chromeを立ち上げ右上の縦の「…」を押す→表示されるメニューから「設定」を押します。

【手順②】「拡張機能」を開く

「設定」を押すと左画像のように「拡張機能」というボタンが表示されるので、それを押します。その後、画面を一番下までスクロールし、「他の拡張機能を見る」というボタンを押します。

【手順③】Chromeウェブストアから「ColorPick Eyedropper」を検索

左画像の様に、検索枠に「ColorPick Eyedropper」を入力して拡張機能を検索します。

【手順④】「ColorPick Eyedropper」をChromeに追加する

「ColorPick Eyedropper」で検索をした後、一番上に表示される拡張機能を追加します。「Chromeに追加」というボタンが右側に表示されているので、それをクリックすればOKです。

【手順⑤】実際に「ColorPick Eyedropper」を使ってみる

「ColorPick Eyedropper」をインストールすると、Chromeを立ち上げた時、右上にアイコンが追加されていますので、それをクリックします。

左画像のように、カラーコードを知りたい色の上をクリックすると、カラーコードが表示されます。

以上が「WEBページから気になる色のカラーコードを抽出する方法」になります。これを使えば様々なシーンで活用できます。その一つに、下記で紹介する「【無料】カラーも自由!WEBで使えるフリーアイコンのオススメはコレ!」があります。カラーコードを使って好きな色に変更できる無料アイコンの使い方を紹介していますので、ぜひ合わせてご覧ください。

1