カラーピッカーを使えばブラウザ上で色のコードが分かる【ColorZilla】

  • 2021年9月27日
  • 2021年9月28日
  • 未分類
  • 4View
  • 0件

ブラウザ上の色コードを知りたいなら、「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.

「ショートカットでカラーピッカーを有効にする」

NO IMAGE
最新情報をチェックしよう!