Webサイト内での『この色のカラーコードは何?』←爆速で判定できます【簡単便利】

お疲れさまです。ダニエルです。

PCを使っていると、、、

Webサイト上のこの色のカラーコードを知りたい!

こんな風に思うことが多くあります。

これ、解決できる方法がありました。

実際に見てましょう。

以下のように爆速で調べることのできるツールがあります。

画像のとおり、気になる色のカラーコードが簡単に分かりました!

これはGoogle拡張機能『ColorPick Eyedropper』を使っています。

Google拡張機能なので、Windows PCでも同じように使うことができます。

導入も使い方もすごく簡単でした。

今から1分後には、Webサイト内の気になる色をすぐに判定できる環境を実現できますよ〜

ということで、やり方を分かりやすく説明します。

Webサイト上の色のカラーコードを調べる方法

最初に全体の流れをお見せします。

作業の流れ

簡単 4ステップ です。

  • 手順①:『ColorPick Eyedropper』ページを開く
  • 手順②:『ColorPick Eyedropper』をChromeに追加する
  • 手順③:メニュー内の『ColorPick Eyedropper』をクリック
  • 手順④:気になる色にマウスオーバー!

では、順番に見ていきましょう。

手順①:『ColorPick Eyedropper』ページを開く

まずはColorPick Eyedropperを有効化していきます。

以下のリンクをクリックし、ColorPick Eyedropperページを開きます。

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

上の画面が表示されました。

手順②:『ColorPick Eyedropper』をChromeに追加する

『Chromeに追加』をクリックします。

『拡張機能を追加』ボタンをクリックします。

上の画面に変われば、Chromeに追加完了です!

手順③:メニュー内の『ColorPick Eyedropper』をクリック

Chromeのウィンドウ右上に、上のような『パズル』アイコンがあると思います。

こちらをクリックします。

ColorPick Eyedropperが追加されています。

メニューバーに常時固定させたいので、「ピン止め」アイコンをクリックしときましょう。

上のように、これでChromeのメニューバー右側に常時表示されるようになりました。

手順④:気になる色にマウスオーバー!

ColorPick Eyedropper』アイコンをクリックします。

そして、画面上の気になる色をマウスオーバーします。

お目当ての色の『カラーコード』と『RGB』も表示されました。これで判定完了です!

お疲れさまでした。

まとめ

Webサイト上やその他様々な場所での色のカラーコード判定方法についてでした。

ColorPick Eyedropper』を使えば、ホントに即座に判定完了できるので、作業効率化もできますね。

ぜひ有効活用してみてください。

というわけで、今回は以上です!

最後までお読み頂き、ありがとうございました。
素敵なPCライフをお楽しみください。