広告 Chrome

Webサイトで使われている『カラーを調べる』方法【Chrome拡張機能】

Webサイトで使われている『カラーを調べる』方法【Chrome拡張機能】

@dearwalker_yuyaです。ウェブサイトの制作やカスタマイズに「この色のカラーコードが知りたい」ということが多々あります。

そこで今回はものすごく簡単に『Webカラーを調べる方法』を御紹介!

マウスオンでカラーコードが分かるChrome拡張機能『ColorPick Eyedropper』

『ColorPick Eyedropper』Chrome拡張機能

手軽にカラーコードを調べることが出来るChrome拡張機能です。

Chromeへ追加するとツールバーへアイコンが表示されます。

Chromeのツールバーへ追加

使い方も簡単で、アイコンをクリックすれば動作開始。

アイコンをクリックして動作開始

カラーを知りたいロゴなどの上へマウスオンすればカラーコードを表示してくれます。

マウスオンでカラーコードを教えてくれる

こんな感じで例えば、SiteMiruのロゴの赤い部分のカラーには【#DC143C】というカラーコードを使っている事が分かります。

そしてカラーコードの一覧表としていつもこちらのサイトを参考させて頂いてます。
代表的なカラーコードがすぐ分かるので便利ですよ。

この拡張機能はちょっとしたリンクカラーの変更時などにも他サイトをサクッと参考に出来るので便利です。

使い方のコツとしてはドット単位で色が出てくるのでなるべく色の中心部分(濃い部分)を調べると正確さが増すと思います。

入れておけばブラウザ上で簡単に調べられるので気になる方はこちらからどうぞ!

あわせて読みたい

-Chrome
-,