とっちゃん@nyanco! です。
ホームページで使われている色の成分がすぐに分かるGoogle Chromeの拡張機能「ColorPick Eyedropper」のご紹介です。
WEBページ上のカラーコードがすぐに分かる！
WEBサイトなどを作成していると、色に迷うことがあります。
そんな時は綺麗にデザインされたサイトやオシャレなサイトを適当に見て参考にするのですが、「この背景に使われている色の成分が知りたい！」といった時に便利なのがこの「ColorPick Eyedropper」です。
拡張機能を追加する
chrome ウェブストアから「ColorPick Eyedropper」で検索して「Chromeに追加」します。
URLバー横にアイコンが追加されたらOKです。
使い方
使い方は簡単！
カラーコードを知りたい物を表示させた状態で「ColorPick Eyedropper」のアイコンをクリックすると、マウスカーソルが変わってカラー抽出モードになります。
この状態で、色を知りたい部分（画像でもOK！）にカーソルを持っていくとカラー成分がリアルタイムで表示されます。
▼動画でその様子を御覧ください。
（たまたま見つけた、オシャレでとってもカレーが美味しそうなチャンピオンカレー様のページを使わせていただきました）
「この色を使いたい！」という箇所でマウスを左クリックすると「16進数カラーコード」と「RGB」がコピーできるウィンドウが表示されるので、あとはコピペするなりメモるなりご自由に♪
カラー抽出モードを抜けたい時は「esc」キーを押すと拡張機能が終了します。
おわりに
今まではChromeの開発者モードでカラーコードを調べていましたが、この拡張機能の方がダントツ早く調べられてめちゃくちゃ便利です！
以前紹介したGoogleの色検索と併用したらカラーバリエーションも即作成できて作業が捗ります。
拡張機能なので、WindowsでもMacでも使えるところも良いですね！
本記事がどなたかの参考になれば幸いです。
今回は以上となります。
最後まで読んでいただきましてありがとうございました！
それではまた〜✧٩(ˊωˋ*)و✧
コメント