ウェブサイトの色を瞬時に取得ColorPick Eyedropper拡張機能紹介

プログラミング

皆さんこんにちはFascodeNetworkのブログスケジュール管理などを行っているなおこです。

今回はウェブ制作を行う際に既存サイトで使われているカラーコードを取得したいときスムーズに行える便利な拡張機能をご紹介したいと思います。

その拡張機能の名は【ColorPick Eyedropper】です。

スポンサーリンク

ColorPick Eyedropperとは

ColorPick Eyedropperは Sam Larisonさんが開発している拡張機能で一般的にウェブサイトのカラーコードを取得したいときはデベロッパーツールを開いて該当cssのプロパティから調べたり、画像の場合はダウンロードしてから調べるなど手間がかかります。

その作業は必要なくなりクリックするだけで取得できるようになります。

そんな便利な拡張機能を紹介します。

ColorPick Eyedropperのウェブサイト

ColorPick - Vidsbee!
Vidsbee Enterprises By Sam Larison

ColorPick EyedropperのChromeウェブストア

https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg

Firefoxのアドオンページ

Colorpick Eyedropper のバージョン履歴 - 全 7 バージョン – Firefox (ja) 向けアドオン

今回使うPCスペックや実行環境

  • OS : Alter Linux(実質Arch Linux)とWindows10Proデュアルブート
  • MB : B450M Steel Legend
  • CPU : AMD Ryzen 5 5600x
  • GPU : NVIDIA GTX 960
  • RAM : 32GB
  • HDD : 4TB
  • SSD : 256GB m.2 (2022/9/15以降のブログには搭載)

上記の環境にGoogle chromeを導入しColorPick Eyedropperをインストールして使ってみます。

ColorPick Eyedropperをインストールしていく

早速ColorPick Eyedropperをインストールして実際に使って紹介したいと思います。

Colorpick Eyedropper – 🦊 Firefox (ja) 向け拡張機能を入手
Firefox 向け Colorpick Eyedropper をダウンロード。A simple eye-dropper & color-picker tool allowing you to select color values from webpages. You will need to enable...
https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg

軽く調べてたところ、Google ChromeやMicrosoft Edge、OperaやBraveはほぼほぼ同じ方法でインストールすることができます。

Firefoxだけ独自のストアでインストールすることができます。

Google Chrome、Microsoft Edge、Opera、Braveの場合

上記のURLに飛び、右上にある水色のchrome に追加するというボタンを押します。

その後権限の許可が求められるので拡張機能の追加をクリックすることで拡張機能のインストールを行うことができます。

表示されているgif画像は別のブログで使用されたものですが、インストールの方法は変わりません。

Firefoxの場合

Firefoxの場合は上記のURL飛びAdd to Firefoxをクリックし出てきたポップアップのAddをクリックしてインストールします。

表示されているgif画像は別のブログで使用されたものですが、インストールの方法は変わりません。

ColorPick Eyedropperを使ってみる

無事インストールできたので実際に使ってみたいと思います。

カラーコードを取得する

と言っても簡単で拡張機能のアイコンが並んでいるところにColorPick Eyedropperのアイコンをクリックします。

アイコンをクリックすると右上にポップアップとマウスの先のカーソルに右上と同じポップアップが表示されます。

取得したい色の場所でクリックするとすぐにクリップボードにコピーされ、手軽にカラーコードを取得することができます。

取得する形式はrgbや16進数カラーコードです。

オプション設定

ポップアップの下に歯車マークがありますがそちらからオプション設定を行うページに飛ぶことができます。

また、オプションページでは様々な設定を行うことができますがほぼほぼ使わないと思います。

ページをリフレッシュする

実はこの拡張機能にはページをリフレッシュする機能がついています。f5とかリロードでよくねと思うけど紹介します。

ポップアップの下の左から2番目にまる矢印がありますそこをクリックすることで、ページのリフレッシュする事ができます。

ウィンドウでポップアップを表示する

この拡張機能にはポップアップをウィンドウとして動作させる機能があります。

こちらは別ウィンドウに移ってもウィンドウ化することによりポップアップを消えないようにすることができます。

まる矢印と同様に一番下のアイコンの一番右にピクチャーインピクチャーなどに使われているようなアイコンがあるのでそれをクリックするとウィンドウ化することができます。

ColorPick Eyedropperのメリットやデメリット

ColorPick Eyedropperを1年以上使って感じた2022-03-03時点でのメリットやデメリットをまとめたいと思います。

メリット

  • デベロッパーツールを開かずにカラーコードを取得する事ができる。
  • 画像のカラーコードも取得できる。
  • 拡大して色を選択することができる。
  • オプションページから色の履歴を見ることができる。
  • rgbや16進数カラーコードにも対応

デメリット

  • 若干日本語がおかしいことがある。
  • 最終更新日が古い

最終更新日が2020年という点がセキュリティ的に気になりますがそれ以外は比較的に安定して動作して手軽にカラーコードを取得できる点などはかなり評価できます。

ウェブページの制作を行ってる方にはぜひぜひ使ってみてほしい拡張機能ですね。

最後に

今回はウェブページの制作に使える便利な拡張機能ColorPick Eyedropperを紹介してみました。

若干古い拡張機能なので心配になることもありますが、カラーコードを手軽に取得できるのは良いですね。

それでは次のブログでお会いしましょう。

コメント

タイトルとURLをコピーしました