WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： とみー
カテゴリー： デザイン >WEBデザイン

はじめまして。
2020年4月に新卒入社した僕からWebに関する情報を、駆けだしだからこそ便利だと思えるツールやサービスを紹介していきたいと思います。
Web業界を目指している方やこれから勉強したいと思っている方々に少しでも参考になれば嬉しいです。

今回はとても便利なGoogle Chromeの拡張機能を紹介していきたいと思います。
デザイナーやマークアップエンジニアならWebサイトやバナーなどのカラーコードを知りたい時があると思います。
そんな時便利なのが、拡張機能「ColorPick Eyedropper」です。

ColorPick Eyedropperの導入方法

「Chromeウェブストア」にアクセス

「ColorPick Eyedropper」にアクセスします。

「Chromeに追加」をクリック

Chromeウェブストアにアクセスしたら、右上にある「Chromeに追加」をクリックして下さい。

ColorPick Eyedropperの使い方

アイコンをクリック

「ColorPick Eyedropper」のアイコンをクリックします。

調べたい色にカーソルを合わせる

調べたい色にカーソルを合わせるだけで「#FFE8C0」だと分かりました。
調べたカラーコードをコピーしたい場合は、そのままクリックするだけでカラーコードが全選択されます。
選択されたら「Ctrl + c」でカラーコードがコピーできます。

まとめ

いかがでしたでしょうか。
すごく簡単にカラーを知ることができるので、デザイン時やコーディング時に重宝すると思います。
導入も簡単なので、ぜひ使ってみて下さい。