【Chrome拡張機能】ColorPick Eyedropperの使い方:サイト上のカラーを調べる

この記事ではGoogleChrome拡張機能のひとつである「ColorPick Eyedropper」の使い方について解説します。

ColorPick Eyedropperの概要

簡単にウェブページ上の色(カラーコード)が調べられる拡張機能です。

色コードとRGB、両方の値を簡単に調べることができます。

拡張機能の追加方法

まずは「ColorPick Eyedropper拡張機能」のWebページ(下のリンク)にアクセスして、以下の手順を進めてください。

chromeウェブストアへ

[timeline]
[tl label=’STEP.1′ title=’「CHROMEに追加」をクリック’]

ColorPick Eyedropperストアページ

拡張機能のWebページにアクセスしたら、右上に表示されている「CHROMEに追加」をクリックします。 [/tl]
[tl label=’STEP.2′ title=’「拡張機能を追加」をクリック’]

ColorPick Eyedropper追加確認画面

確認画面が表示されますので、「拡張機能を追加」をクリックします。 [/tl]
[tl title=’完了!’]

ColorPick Eyedropper追加完了画面

追加が完了すると、ブラウザの右上にアイコンが表示されます。 [/tl]
[/timeline]

ColorPick Eyedropperの使い方

右上のアイコンをクリックすると動作が開始し、マウスオンでカラーを確認できるようになります。

[yoko2 responsive][cell]ColorPick Eyedropperカラー確認[/cell][cell][box class=”box2″]カラーを知りたいロゴなどの上へマウスオンすればカラーコードを表示してくれます。[/box][/cell][/yoko2]

[yoko2 responsive][cell]ColorPick Eyedropperカラー確認2[/cell][cell][box class=”box2″]例えば、「chromeウェブストアへ」というボタンの赤い部分のカラーには【#EF8276】というカラーコードを使っている事が分かります。[/box][/cell][/yoko2]

代表的なカラーコードは以下のサイトを参考にしてみてください。

WEB色見本 原色大辞典 – HTMLカラーコード

まとめ

[box class=”box26″ title=”まとめ”]

  • ColorPick Eyedropperを使うとウェブページ上の色(カラー)を調べることができる
  • ドット単位で色(カラー)を確認することができる

[/box]