【Chrome】Webサイトの色を特定!拡張機能「ColorPick Eyedropper」を使う

スポンサーリンク
Google
スポンサーリンク

こんにちは、けーどっとけーです😀

PCでもスマホでもWebサイトを見るときは、Google Chromeを使っています。

Google Chromeは設定でカスタムテーマの色を変えたり、様々な拡張機能を追加できたりできます。

拡張機能には、Webサイト上にある色のコードを調べることができる「ColorPick Eyedropper」という機能があります。
今回は、この機能を追加してサイトの色々な箇所の色を調べてみようと思います。

スポンサーリンク

拡張機能「ColorPick Eyedropper」を追加する

拡張機能はこちらから追加できます。

ColorPick Eyedropperのページから「Chromeを追加」をクリックすると追加できます。
ColorPick Eyedropper 追加

Chrome上に追加するかの確認ウィンドウが表示されます。
「拡張機能を追加」をクリックします。
ColorPick Eyedropper 拡張機能

ColorPick Eyedropperが追加できると、URL横にアイコンが追加されます。
ColorPick Eyedropper 追加完了

ColorPick Eyedropperを使ってみる

ColorPick Eyedropperアイコンをクリックすると使えるようになります。
ColorPick Eyedropper アイコンクリック

クリック後、マウスカーソルをWebサイト上に移動させるとその箇所のカラーコードを表示してくれます。
ColorPick Eyedropper サイトの色

見た感じだとカーソルを置いた場所を細かく指定してくれる感じです。
色の境目の微妙な色の違いも判別してカラーコードを表示してくれます。
ColorPick Eyedropper 他の箇所

さらに箇所をクリックすると、その箇所のカラーコードをコピーできるようウィンドウが表示されます。
ColorPick Eyedropper カラーコード

この16進数のカラーコードを控えておけば、その色を特定することができます。
こちらは「色検索」というサイトでコピーしたカラーコードを使って検索しました。
ColorPick Eyedropper カラーコード控え

ColorPick Eyedropperを停止するには、アイコンをクリックしてウィンドウを表示し、左上の「×」マークをクリックします。
ColorPick Eyedropper 停止

停止するとカーソルを移動してもColorPick Eyedropperのカラーコードは表示されません。
ColorPick Eyedropper 停止後

他のサイトでも試してみました。
こちらは「Lenovo」のロゴをColorPick Eyedropper起動でカーソルあてて表示しています。
ColorPick Eyedropper 他のサイト

サイトを閲覧して気になった色があればColorPick Eyedropperを使ってカラーコードを控えておくと面白いかもしれません。

今回の一言・・・

僕は色に詳しいわけではないので、以前使った色や気に入った色などは結構忘れてしまうことがあります。
Webサイト限定になりますがこのColorPick Eyedropperを使えば色を記録しておけるので便利です。

ここまで読んでくれてありがとう。
では、また次回。

コメント

タイトルとURLをコピーしました