「ColorPick Eyedropper」は開いているWEBページ内からカラーコードを取得できるChromeの拡張機能です。開いているページの見たいのRBG値やカラーコードを取得することができます。WEB作成中に、あのサイトのあの色参考にしたい、パクリたい(笑)、カラーコードがみたいな～ということが時々あるので、非常に重宝しています。
- 表示しているWEBサイトの気になる部分のカラーコードが瞬時に確認できる。
- 取得したい色の部分でクリックするとカラーコードが取得できる。
- RGB値もわかる
ColorPick Eyedropperの導入・使い方
ColorPick Eyedropperの導入
Chromeの拡張機能は、ChromeウェブストアのページからChromeに追加していきます。
▲Chome拡張機能の追加はいつのワンパターン。【Chomeに追加】をクリックします。
▲【拡張機能を追加】ボタンをクリックして完了です。
ColorPick Eyedropperの使い方
色を取得したいWEBページを表示させた状態でChome右上の【ColorPick Eyedropper】のアイコンをクリックします。マウスカーソルが、十字カーソルとボックスになり表示されます。当サイトのページで試してみましょう。
拡張機能を起動すると｢十字マーク｣が表示されるので、取得したい色の上へ持っていきましょう。
白色のところにカーソルを合わせると、白【#FFFFFF】を表示します。
▲ナビゲーションバーの色はオレンジ系統の色ですが、【#FF5F1B】と表示されました。
▲取得したい色の上でクリックると、カラーコードが表示され、コピーできる状態となります。カラーコードの部分が反転しているので、そのままコピペできるのでとても便利です。
ColorPick Eyedropperを終了する際は【Esc】キーで終了します。
ウェブ系のお仕事をしている方には重宝する拡張機能ではないかと思います。
私は配色を考える際は以下のようなサイトも参考にしています。
コメント