お疲れさまです。ダニエルです。
PCを使っていると、、、
Webサイト上のこの色のカラーコードを知りたい!
こんな風に思うことが多くあります。
これ、解決できる方法がありました。
実際に見てましょう。
以下のように爆速で調べることのできるツールがあります。
画像のとおり、気になる色のカラーコードが簡単に分かりました!
これはGoogle拡張機能『ColorPick Eyedropper』を使っています。
Google拡張機能なので、Windows PCでも同じように使うことができます。
導入も使い方もすごく簡単でした。
今から1分後には、Webサイト内の気になる色をすぐに判定できる環境を実現できますよ〜
ということで、やり方を分かりやすく説明します。
Contents
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ライフをお楽しみください。