こんにちは、けーどっとけーです😀
PCでもスマホでもWebサイトを見るときは、Google Chromeを使っています。
Google Chromeは設定でカスタムテーマの色を変えたり、様々な拡張機能を追加できたりできます。
拡張機能には、Webサイト上にある色のコードを調べることができる「ColorPick Eyedropper」という機能があります。
今回は、この機能を追加してサイトの色々な箇所の色を調べてみようと思います。
拡張機能「ColorPick Eyedropper」を追加する
拡張機能はこちらから追加できます。
ColorPick Eyedropperのページから「Chromeを追加」をクリックすると追加できます。
Chrome上に追加するかの確認ウィンドウが表示されます。
「拡張機能を追加」をクリックします。
ColorPick Eyedropperが追加できると、URL横にアイコンが追加されます。
ColorPick Eyedropperを使ってみる
ColorPick Eyedropperアイコンをクリックすると使えるようになります。
クリック後、マウスカーソルをWebサイト上に移動させるとその箇所のカラーコードを表示してくれます。
見た感じだとカーソルを置いた場所を細かく指定してくれる感じです。
色の境目の微妙な色の違いも判別してカラーコードを表示してくれます。
さらに箇所をクリックすると、その箇所のカラーコードをコピーできるようウィンドウが表示されます。
この16進数のカラーコードを控えておけば、その色を特定することができます。
こちらは「色検索」というサイトでコピーしたカラーコードを使って検索しました。
ColorPick Eyedropperを停止するには、アイコンをクリックしてウィンドウを表示し、左上の「×」マークをクリックします。
停止するとカーソルを移動してもColorPick Eyedropperのカラーコードは表示されません。
他のサイトでも試してみました。
こちらは「Lenovo」のロゴをColorPick Eyedropper起動でカーソルあてて表示しています。
サイトを閲覧して気になった色があればColorPick Eyedropperを使ってカラーコードを控えておくと面白いかもしれません。
今回の一言・・・
僕は色に詳しいわけではないので、以前使った色や気に入った色などは結構忘れてしまうことがあります。
Webサイト限定になりますがこのColorPick Eyedropperを使えば色を記録しておけるので便利です。
ここまで読んでくれてありがとう。
では、また次回。
コメント