ブラウザ上の色コードを知りたいなら、「ColorZilla」で楽々抽出！
「このロゴの色いいな～」「このサイトの色味真似したいな～」そんなことは、しょっちゅう思うこと。
デザインもセンスも、たくさん見て、真似しないと磨かれない。
「ColorZilla」を使えば、ブラウザ上のどんな色も知ることができる。
ColorZillaのインストール
「ColorZilla」は、ブラウザ上の画像やテキストなどの色を確認できるchromeの拡張機能だ。
①以下のサイトからColorZillaをインストール
インストールはこちらから
②インストールされたか確認
※アドオンバーに表示されない場合は、アドオンバーのジグソーパズルをクリックし、ColorZillaを固定化する。
ColorZillaの使い方
ただの色がわかるアドオンと侮るなかれ。
かゆいところに手が届く機能が詰まっている。
基本操作①カラーピッカー
まずは、カラーピッカー機能。
デフォルトで、ColorZillaのアドオンをクリックすればカラーピッカーが起動するようになっている。
カラーピッカーが起動しない場合は、「Color Picker」をクリックする。
十字マークが表示されたら、抽出したい部分をクリックすると、カラーコードがクリップボードにコピーされる。
基本操作②カラーピッカーの履歴を確認
過去に抽出した色を確認できる。
「Picked Color History」をクリック。
以下のパネルが開くので、コピーしたい色を選択してカラーコードをコピーするだけ！
カラーパネルを利用して、色味を調整することもできるので便利。
便利機能①WEBページの色解析
「Webpage Color Analyzer」をクリックすれば、WEBサイトで使用している大体の色を抽出してくれる。
調子が悪い時があるので、使えないときもある。(これは海外クオリティーかもしれない。)
便利機能②：カラーパレット
「Palette Browser」をクリックで、カラーパレットを見ることができる。
HTML基本16色のカラーパレットやパステル系のパレットなどを確認できる。
便利機能③：カラーコードをコピー
様々な種類のカラーコードをコピーできる。
「Copy To Clipboad」をクリック。
別パネルが開くので、自分好みのカラーコードを選択すれば、クリップボードにコピーされる。
オプション設定
設定は「Options」から可能。
設定できる項目は以下の通り。
スポイト機能と自動コピーにチェックを入れておけば、快適に使用できると思う。
Eyedropper「スポイト設定」
①Automatically start eyedropper when main button is clicked.
「アイコンクリックで、カラーピッカーが起動」
②Outline hovered elements.
「要素エリアがわかるように、枠が表示される」
③
「カーソルを十字表示にする」
Auto-copy「自動コピー」
Automatically copy picked color to clipboard.
「選択した色を自動的にクリップボードにコピーする」
Auto-copy color format:
「自動コピーするカラーコードの種類」
Color Format「カラーフォーマット」
Show Hex codes in lowercase.
「16進数コードを小文字で表示」
Keyboard Shortcuts「キーボードショートカット」
Enable color picking from page using keyboard shortcut.
「ショートカットでカラーピッカーを有効にする」