概要
ウェブサイトの配色などを確認したい時に簡単に色を抽出できるブラウザの拡張機能を紹介します。
ブラウザごとの拡張機能
Chrome
ColorZillaが簡単に使えて便利です。
ColorZilla
https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=ja
拡張機能をインストールすると、ツールバーに以下のアイコンが表示されます。
ここをクリックすると
こんな感じのメニューが表示されるので、一番上の「Pick Color From Page」をクリックしてください。
マウスカーソルが十字に変わるので確認したい色をクリックすると
のような表示がブラウザ上部に表示されます。
ここでも確認できますし、この表示が消えても先ほどの画像のメニューにある「Copy To Clipboard」から色々な形式のコードを取得することができます。
また、「Color Picker」をクリックすると選択した色のカラーピッカーが表示されます。
Firefox
Chromeと同じなので割愛します。
safari
safariは拡張機能を使わなくてもMacの標準機能でRGB形式のカラーコードを取得できます。
Spotlightで「Digital Color Meter」を検索してください。
検索結果からアプリを開くと以下のようなアプリが起動されます。
RGB形式の16進数カラーコード取得を前提にしているので、「ネイティブの値を表示」となっていたら「汎用のRGBで表示」に変更してください。
「表示＞値を表示＞16進」を選択してください。
設定が完了したら取得したい色の上にますうカーソルを移動し、「cmd + shift + c」をクリックしてください。
これだけで、クリップボードにコピーされます！
ちなみに「cmd + option + c」をクリックするとカラーをイメージとしてクリップボードにコピーします。
さらに詳細は「Digital Color Meter」のヘルプに絞りの位置調整など細かく説明されています。
最後に
ColorZillaはブラウザ内ではとても簡単にカラーコードを抽出できるのでとても便利です。
Macの標準機能の「Digital Color Meter」はブラウザ以外のカラーでも簡単に確認できるのでさすがMacという感じですね。
