ブログやWebサイトを運営していると、大なり小なりデザインも触ることになっていくんですが、
とか、
といった感じで、ブログやWebサイト上のロゴや背景、画像やボタンといったものの「カラーコード」を知りたいときが、実は少なからずあったりするんですね。
Web上で色を表現するために用いられる、文字の羅列からなる符号のことで、「ウェブカラー」とも呼ばれます。
例えば、
- ホワイトなら「#ffffff」
- ブラックなら「#000000」
といった感じで、「#」＋「英数字6桁」で表現されるのが一般的です。
僕は過去にカラーコードを調べたい場合、「色 見本」といったキーワードで検索して、そこで見つけたサイトと、Windowsのペイントツールとを組み合わせながら調べるという、結構アナログな方法でカラーコードを調べていた時期がありました。
でも、そんなアナログで非効率な方法を使わなくても、「たったの3秒で」カラーコードを調べることができる方法があるんです。
それが『ColorPick Eyedropper（カラーピッカーアイドロッパー）』というChromeの拡張機能。
というわけで今回は、ColorPick Eyedropperについて解説していこうと思います。
ColorPick Eyedropperの機能
ColorPick Eyedropperを使えば、たったの3秒で簡単に知りたい部分のカラーコードを調べることができます。
どうしてそんなに簡単なのかというと、下の画像のように知りたいカラーコードの部分にカーソルを持って行くだけで、カラーコードを取り出すことができてしまうからです。
このように、KALDIのロゴの青い部分のカラーコードは「#014099」ということがあっという間に判明するんですね。
ColorPick Eyedropperの使い方
❶下記のページにアクセスし、Chromeに拡張機能を追加します。
※必ずChromeからアクセスしてください。
❷Google ChromeのツールバーにColorPick Eyedropperのアイコンが表示されたら、これで準備完了です！
ColorPick Eyedropperのアイコンをクリックします。
❸ 調べたい色の箇所にカーソルを持って行きます。
ColorPick Eyedropperのアイコンをクリックすると、十字のカーソル表示が出現するので、調べたい色の箇所まで持っていってみてください。
下の画像のように調べたい箇所のカラーコードが自動で表示され、ブログロゴのこの部分のカラーコードは、「#5D9CE0」だということが分かりました。
❹カラーコードを知りたい部分にカーソルを持っていって、そこでクリックすれば、カラーコードを全選択＆コピーすることができるようになります。
バツ印を押せば、ColorPick Eyedropperの起動を終了させることができます。
まとめ
というわけで今回は、Chrome拡張機能ColorPick Eyedropperの使い方について解説させていただきました。
実際に使ってみると、物凄く簡単だったんじゃないでしょうか？
僕は以前はカラーコードを調べるだけで、１～２分はかかってましたがこの方法なら、ものの３秒で調べることができますね！
ぜひカラーコードを調べる際の参考にしてみてくださいね。
自由と自分らしいライフスタイルの描き方
